Question

我写了一个菜单结构here。它应该是手风琴类型的菜单 - 当您单击它打开的项目时，当您单击它打开的另一个项目时，第一个项目将被关闭。我尝试了不同的东西，仍然无法正常工作。有人可以检查代码并告诉那里必须添加什么？谢谢！ 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);
    };
  });

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

Fiddle

定制手风琴菜单，jQuery

1 个答案: