javascript - 自定义 Accordion 菜单，jQuery

Question

我写了一个菜单结构here .它应该是 Accordion 类型的菜单 - 当您单击一个元素时它会打开，当您单击另一个元素时它会打开并且第一个关闭。 我尝试了不同的东西，但仍然无法正常工作。有人可以检查代码并告诉那里必须添加什么吗？谢谢! 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