0

ネストされたリストの特定の要素の表示と非表示に問題があります。私の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>

私はWeb開発に不慣れで、現在、科目をクリックするとすべての科目のすべての学期が表示されるという問題に直面していますが、クリックした科目だけが表示される学期が必要です。私が欲しいものを手に入れるための回避策はありますか？

ありがとう。

4

2 に答える 2

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>
于 2013-01-23T18:13:11.883 に答える
0

使用する前に 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);">
于 2013-01-23T18:06:50.193 に答える