jquery - 使用 jQuery 显示和隐藏嵌套列表切换

Question

我在显示和隐藏嵌套列表的某些元素时遇到了一些问题。我的 HTML 代码如下：

<ul class="unstyled">
        <li onClick="foo();">INFO 1234 - Some Code Subject
        <ul>
            <li class="sem_hide">Semester 1
            <li class="sem_hide">Semester 2
            <li class="sem_hide">Semester 3
        </ul>
        <li onClick="foo();">INFO 4567 - Some DB Subject
        <ul>
            <li class="sem_hide">Semester 1
            <li class="sem_hide">Semester 2
            <li class="sem_hide">Semester 3
        </ul>
</ul>

我的 JavaScript 看起来像这样：

<script>
        function foo()
        {
            if($('li .sem_hide').is(":visible"))
            {
                $('li .sem_hide').hide();
            }
            else 
            {
                $('li .sem_hide').show();
            }
        }
</script>
<script type="text/javascript" src="js/jquery.js"></script>

我的CSS是这样的：

<style>
    body{
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        background: #efefef;
    }

    li .sem_hide{
        display: none;
    }

</style>

我是网络开发的新手，目前面临一个问题，即当我单击一个主题时，会显示所有主题的所有学期，但我想要的是仅显示单击的主题的学期。有没有办法得到我想要的？

谢谢。

Answer 1

<ul class="unstyled">
    <li class = 'subject'>INFO 1234 - Some Code Subject
    <ul class = "semList>
        <li>Semester 1</li>
        <li>Semester 2</li>
        <li>Semester 3</li>
    </ul>
    <li class = "subject">INFO 4567 - Some DB Subject
    <ul class ='semList'>
        <li>Semester 1</li>
        <li>Semester 2</li>
        <li>Semester 3</li>
    </ul>
</ul>

<script>
    $(document).ready(function(){
        $(".subject").click(function(){
            $(".semList").hide();
            $(this).next(".semList").show();
        });
</script>

Answer 2

在使用之前添加 jQuery，在 foo 中将它传递给指向源对象。

<script>
        function foo(obj)
        {
            if($('.sem_hide', obj).is(":visible"))
            {
                $('sem_hide', obj).hide();
            }
            else 
            {
                $('.sem_hide', obj).show();
            }
        }
</script>
<li onClick="foo(this);">