javascript - 使用 jquery 显示/隐藏 html ul

Question

我试图在单击前一个列表元素时显示隐藏的嵌套列表。为此，我想修改 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>

Answer 1

<!--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>

主要问题是您没有使用 dom ready

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

然后你可以使用toggleClass切换类(class)