在 li 中切换 ul 仅在关闭时设置动画

Question

我正在尝试打开成分复选框，但它没有动画。

如此处主题所述，遵循我的代码：

HTML

<div class="col-xs-12">
    <div class="recipePicContainer">
        <div id="checkBoxes">
                <li class="recipe"></li>
                       <ul>
                           <ul><input type="checkbox"> ingredient 1</ul>
                           <ul><input type="checkbox"> ingredient 2</ul>
                           <ul><input type="checkbox"> ingredient 3</ul>
                           <ul><input type="checkbox"> ingredient 4</ul>
                           <ul>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ul>
                       </ul>
                </div>
            </div>
        </div>

Javascript

 var main = function() {
     $(document).ready(function(){
         $('ul').hide();
         $('.recipe').click(function () {
             $('ul').toggle("slow");
         });
    }); }; $(document).ready(main);

谢谢你们！

Answer 1

这是您要找的吗？用 .fadeIn() 淡入。还向包含所有复选框的 ul 添加了一个 ID。

$(document).ready(function(){
     $('#ingredients').hide();
     $('.recipe').click(function () {
         $('#ingredients').fadeIn();
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
  <div class="recipePicContainer">
    <div id="checkBoxes">
        <li class="recipe">Click me</li>
           <ul id="ingredients">
             <ul><input type="checkbox"> ingredient 1</ul>
             <ul><input type="checkbox"> ingredient 2</ul>
             <ul><input type="checkbox"> ingredient 3</ul>
             <ul><input type="checkbox"> ingredient 4</ul>
             <ul>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ul>
         </ul>
    </div>
  </div>
</div>

Answer 2

成分是否需要单独的 ul 元素？将这些更改为 li 元素解决了这个问题。

我还建议在您的元素上使用类并根据这些类进行选择，而不是选择和切换页面上的所有 ul 元素。

var main = function() {
  $(document).ready(function() {
    $('ul').hide();
    $('.recipe').click(function() {
      $('ul').toggle("slow");
    });
  });
};
$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
  <div class="recipePicContainer">
    <div id="checkBoxes">
      <li class="recipe">Click</li>
      <ul>
        <li><input type="checkbox"> ingredient 1</li>
        <li><input type="checkbox"> ingredient 2</li>
        <li><input type="checkbox"> ingredient 3</li>
        <li><input type="checkbox"> ingredient 4</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
    </div>
  </div>
</div>

Answer 3

检查这个

https://jsfiddle.net/sandmehta2014/ccy7s0pe/

我刚刚更改了以下内容：

<li class="recipe"> 
                       <ul>
                           <li><input type="checkbox"> ingredient 1</li>
                           <li><input type="checkbox"> ingredient 2</li>
                           <li><input type="checkbox"> ingredient 3</li>
                           <li><input type="checkbox"> ingredient 4</li>
                           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                       </ul>
                      </li>

I guess you have taken ul in place of li.

在 li 中切换 ul 仅在关闭时设置动画

Toggling ul inside an li only animates when closing

javascript

jquery

web-applications

toggle