Question

我在li里面有一个列表，当点击父li时需要滑入视图。

我的代码效果很好，但如果我点击任何li，所有子列表显示我想要的地方只适用于被点击的那个...

$("#offering li").click(function() {
        $("#offering li ul").animate({height: "toggle"}, 1000);
    });


<ul id="offering">
     <li class="t current"><a href="#solutions"><span>sage solutions</span></a>
                    <ul>
                        <li><a href="#">50</a></li>
                        <li><a href="#">200</a></li>
                        <li><a href="#">CRM</a></li>
                    </ul>
                </li>
     <li class="m"><a href="#management"><span>solutions</span></a>
                  <ul>
                      <li><a href="#">50</a></li>
                      <li><a href="#">200</a></li>
                      <li><a href="#">CRM</a></li>
                  </ul>
              </li>
     <li class="b"><a href="#thirdparty"><span>third party additions</span></a></li>
            </ul>

Answer 1

$(this).find("ul").animate({height: "toggle"}, 1000);

Answer 2

在这里，您将动画应用于与选择器#offering ul li匹配的所有元素，而实际上您只需将其应用于所点击的li的子ul。

而不是以下

$("#offering li").click(function() {
        $("#offering li ul").animate({height: "toggle"}, 1000);
    });

试试这个

$("#offering li").click(function() {
        this.childNodes[0].animate({height:"toggle"},1000);
    });

我对jQuery的熟悉程度和Mootools不太一样，所以可能有一种比使用childNodes数组更合适的方法来获取子ul元素 - 但是你明白了。

在li中切换和设置ul的高度

2 个答案: