0

我在这里写了一个菜单结构。它应该是手风琴类型的菜单 - 当您单击一个项目时它会打开，当您单击另一个项目时它会打开并且第一个项目会关闭。我尝试了不同的方法，但仍然无法正常工作。有人可以检查代码并告诉那里必须添加什么吗？谢谢！html 必须保持完整。

<ul class="side_menu">
<li><span>Level 1</span>
    <ul>
        <li><span>Level 2</span>
            <ul>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
            </ul>
        </li>
        <li><span>Level 2</span>
            <ul>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
            </ul>
        </li>
        <li><span>Level 2</span>
            <ul>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><span>Level 1</span>
    <ul>
        <li><span>Level 2</span>
            <ul>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
            </ul>
        </li>
        <li><span>Level 2</span>
            <ul>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><span>Level 1</span>
    <ul>
        <li><span>Level 2</span>
            <ul>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
            </ul>
        </li>
       <li><span>Level 2</span>
            <ul>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
            </ul>
        </li>
        <li><span>Level 2</span>
            <ul>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 3</a></li>
            </ul>
        </li>
    </ul>
</li>
</ul>

这是我的js：

jQuery(".side_menu li span").click(function(){
    if (jQuery(this).parent("li").hasClass("opened")) 
    {
        jQuery(this).parent("li").removeClass("opened");
        jQuery(this).next("ul").slideUp(200);
    } else {
        jQuery(this).parent("li").addClass("opened");
        jQuery(this).next("ul").slideDown(200);
    };
  });
4

1 回答 1

1

我绝对是更少代码的粉丝。切换这些元素应该可以满足您的预期需求。就像是：

jQuery(".side_menu li span").click(function(){
    $li = jQuery(this).closest('li');
    $li.toggleClass('open');
    $li.siblings('.open').removeClass('open').find('>ul').slideToggle(200);
    $li.find('>ul').slideToggle(200);
});

小提琴

于 2013-09-25T13:39:19.307 回答