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

我在显示和隐藏嵌套列表的某些元素时遇到一些问题。我的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>

INFO 1234-一些代码主题

第一学期
第二学期
第三学期

INFO 4567-一些数据库主题

第一学期
第二学期
第三学期

我的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>

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

    li .sem_hide{
        display: none;
    }

</style>

函数foo（）
{
如果（$（'li.sem_hide'）是（“：可见”））
{
$（'li.sem_hide'）.hide（）；
}
其他的
{
$（'li.sem_hide'）.show（）；
}
}

我的CSS是这样的：

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

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

    li .sem_hide{
        display: none;
    }

</style>

身体{
宽度：600px；
左边距：自动；
右边距：自动；
背景：#efef；
}
李。西米皮{
显示：无；
}

我是网络开发新手，目前面临的一个问题是，当我点击一个主题时，所有主题的所有学期都会显示出来，但我想要的是只显示点击主题的学期。是否有一个解决办法来获得我想要的

---

谢谢。

在使用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);">

函数foo（obj）
{
如果（$（'.sem_hide'，obj.）.is（“：visible”））
{
$（'sem_hide'，obj.hide（）；
}
其他的
{
$（'.sem_hide'，obj.show（）；
}
}

信息1234-一些代码主题
贾扎卡拉·哈伊尔！正是我想要的。