Javascript 在li内切换ul仅在关闭时才显示动画

我试着打开一个成分的复选框，它在没有动画的情况下就这样做了

正如我在这里提到的，我的代码如下：

HTML

---

Thanx伙计们

这就是你要找的吗？淡入淡出。还向包含所有复选框的

ul

添加了一个ID

$（文档）.ready（函数（）{
$（“#配料”）.hide（）；
$（'.recipe'）。单击（函数（）{
$（“#配料”）.fadeIn（）；
});
});

单击我

成分1
成分2
成分3
成分4
Lorem ipsum door sit amet，奉献精英。

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

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


var main=function（）{
$（文档）.ready（函数（）{
$（'ul'）.hide（）；
$（'.recipe'）。单击（函数（）{
$（'ul'）。切换（“慢速”）；
});
});
};
$（文件）.ready（主）

单击

成分1
成分2
成分3
成分4
Lorem ipsum dolor sit amet，是一位杰出的献身者

检查此项


我只是改变了以下几点：

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



成分1
成分2
成分3
成分4
Lorem ipsum dolor sit amet，是一位杰出的献身者



我想你已经用ul代替了李

你能创建一个可以重现问题的小提琴吗？这个更好，但它也复制了我在ul中多次设置的图像，这是不需要的。这非常有效，我真的不想在列出的成分之前使用li的*，但是它仍然比以前的工作方式要好
 var main = function() {
     $(document).ready(function(){
         $('ul').hide();
         $('.recipe').click(function () {
             $('ul').toggle("slow");
         });
    }); }; $(document).ready(main);

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