Question

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

我的目标是什么，当点击第一个li时，它将显示子菜单。当点击第二个li时，它将显示1级子菜单，第一个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();

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

1 个答案: