Javascript 自定义菜单，jQuery

我写了一个菜单结构。它应该是手风琴式菜单-当你点击一个项目时，它会打开，当你点击另一个项目时，它会打开，第一个项目会关闭。 我尝试了不同的方法，但仍然无法正常工作。有人能检查一下代码并告诉我们需要添加什么吗？谢谢 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>

---

我绝对是少代码的粉丝。切换这些元素应该可以满足您的期望。比如：

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

---

为什么要使用

opened

class，是否将其用作检查元素是否打开的标志。。或者您已经为

open

Arjun提供了一些样式表，是的，开放类有一些样式。查德，谢谢你的快速回答！我忘了更新我的初始小提琴，它实际上应该是这样的-（注意级别2样式）。你的js工作得很好，但是缺少Level2样式-你能检查一下吗？只需将类从open更改为open。太好了！最后一个问题——如果页面加载的类已经“打开”（有些项是打开的），那么它的工作就很奇怪。你能修好它吗？删除uls的显示CSS，并使用JS进行操作，因为其余的显示/隐藏功能就是这样工作的。

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