jquery html子菜单点击显示/隐藏

Question

jquery 新手在这里。我在这里创建了垂直菜单。

我的目标是什么， 单击第一个 li 时，将显示子菜单。 点击第二个li时，会显示一级子菜单，第一个li会关闭。如果我点击 1 级子菜单，它会显示 2 级子菜单，并且 li 保持打开状态。

这是我到目前为止所做的http://jsfiddle.net/f4cfh6kx/2/

HTML:

第一的

    <ul>
        <li><a href="#">Second</a>

        </li>
        <li><a href="#">Second</a>

        </li>
        <li><a href="#">Second</a>

        </li>
    </ul>
</li>
<li class="showFirst"><a href="#">First<span
                    class="sb-caret"></span></a>

    <ul>
        <li class="showSecond"><a href="#">Second<span
                            class="sb-caret"></span></a>

            <ul>
                <li><a href="#">third</a>

                </li>
                <li><a href="#">third</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Second</a>

        </li>
        <li><a href="#">Second</a>

        </li>
    </ul>
</li>

JSP：

$(function () {
$('.showFirst').click(function () {
    $(this).children('ul').slideToggle();
    $('.showFirst > li').not(this).find('ul').slideUp();
});
$('.showSecond').click(function () {
    $(this).children('ul').slideToggle("slow");
});

});

CSS：

ul {
list-style: none;
cursor: pointer;
}
a {
    color: black;
    line-height: 25px;
    text-decoration: none;
}
a:hover {
    color: #aaa;
    text-decoration: none;
}
span.sb-caret {
    width: 0px;
    height: 0px;
    display: inline-block;
    margin: 0px 5px;
    border: 5px solid transparent;
}
span.sb-caret {
    /* Caret Down */
    border-top: 5px solid;
    border-bottom: 0px solid transparent;
}
.sb-submenu-active > span.sb-caret {
    /* Caret Up */
    border-top: 0px solid transparent;
    border-bottom: 5px solid;
}
ul li > ul {
    display: none;
    /*  border:1px solid black; */
}

Answer 1

JS Fiddle

$('.showSecond').click(function () {
    $(this).children('ul').slideToggle("slow");
    return false; /** add this line **/
});

编辑切换

JS Fiddle

只需从下面的代码中删除li

$('.showFirst').not(this).find('ul').slideUp();