Javascript 使用jquery显示/隐藏html ul

单击上一个列表元素时，我试图显示隐藏的嵌套列表。为此，我想修改html元素的类。我以前没有使用过JavaScript/jQuery，所以对于如何尝试这一点我有点困惑

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$('li').click(function () {
    if ($(this).next('ul').hasClass("hidden")) {
        $(this).next('ul').removeClass("hidden");
        $(this).next('ul').addClass("visible");
    } else if ($(this).next('ul').hasClass("visible")) {
        $(this).next('ul').removeClass("visble");
        $(this).next('ul').addClass("hidden");
    }
});
</script>

<ul class="year">
    <li>2013</li>
    <ul class="hidden">
        <li>Nov</li>
        <ul class="hidden">
            <li>25</li>
        </ul>
    </ul>
</ul>

$（'li'）。单击（函数（）{
if（$（this）.next（'ul'）.hasClass（“隐藏”））{
$（this）.next（'ul'）.removeClass（“隐藏”）；
$（this）.next（'ul'）.addClass（“可见”）；
}else if（$（this）.next（'ul'）.hasClass（“可见”））{
$（this.next（'ul'）.removeClass（“visble”）；
$（this）.next（'ul'）.addClass（“hidden”）；
}
});

2013年

十一月

二十五

试试这个

$("id").toggle();

应该这样做

<!--Invalid HTML structure fixed, ul should have li elements as its children-->
<ul class="year">
    <li>2013
        <ul class="hidden">
            <li>Nov
                <ul class="hidden">
                    <li>25</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

---

然后您可以使用切换类

您的标记不正确。您不能将

ul

作为

ul

//dom ready handler
jQuery(function () {
    $('li').click(function (e) {
        //stop propagation else parent li elements click handlers will get triggered
        e.stopPropagation();
        //use toggleClasss
        $(this).children('ul').toggleClass('hidden visible')
    });
})