如何用 jquery 创建简单的侧边菜单？

Question

我的菜单位于侧面位置，代码是：

<ul>
<li>
    <span class="arz">
        first menu
    </span>
    <ul  id="arz">
        <li>
            first submenu
        </li>
        <li>
            second submenu
        </li>
        <li>
            third submenu
        </li>
    </ul>
</li>
<li class="words">
    two menu
    <ul id="words">
        <li>
            first submenu
        </li>
        <li>
            second submenu
        </li>
    </ul>
</li>

jquery 代码是：

$(document).ready(function(){
    $(".submenu").click(function(){
        $(this).children(this).slideToggle("slow");
    });
});

但我想通过使用 slideToggle单击 第一个菜单 ul 元素和 id="arz"，
这段代码可以做到这一点，但是当我单击对应的每个子菜单项时，ul 使用slideToggle`。 感谢
绫

Answer 1

在您的 jquery 代码中，您引用了 html 中不存在的类。这就是它不起作用的原因。下面是一些稍微修改过的内容，您可以在此 jsFiddle 示例

HTML

<style>
    ul.submenu{display:none;background:#ccc;}
</style>
<ul class="menu">
    <li class="arz">
        <span>first menu</span>
        <ul id="arz" class="submenu">
            <li>
                first submenu
            </li>
            <li>
                first submenu
            </li>
            <li>
                first submenu
            </li>
        </ul>
    </li>
    <li class="words">
        <span>second menu</span>
        <ul id="words" class="submenu">
            <li>
                second submenu
            </li>
            <li>
                second submenu
            </li>
            <li>
                second submenu
            </li>
        </ul>
    </li>
</ul>

jQuery

$(function(){
    $('ul.menu li').click(function(){
        $(this).find('ul.submenu').slideToggle('slow')
    })
})