在 li 内切换 ul 仅在关闭时动画答案

【问题标题】：Toggling ul inside an li only animates when closing在 li 内切换 ul 仅在关闭时动画
【发布时间】：2017-07-08 11:25:45
【问题描述】：

我正在尝试打开一个成分复选框，它只是在没有动画的情况下做到了。

正如这里提到的主题遵循我的代码：

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);

谢谢大家！

【问题讨论】：

你能创建一个可以重现问题的小提琴吗？

标签： javascript jquery web-applications toggle

【解决方案1】：

成分需要是单独的 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>

【讨论】：

效果很好，我真的不想要列出成分之前的 li 的 *，但它仍然比以前的效果更好。
使用css属性list-style: none;向<ul>元素添加一个类

【解决方案2】：

这就是你要找的吗？使用.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>

【讨论】：

【解决方案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>

我猜你已经用 ul 代替了 li。

【讨论】：

这个效果更好，但它也复制了我在 ul 中设置的图像多次，这是不需要的。