0

ポートフォリオ サイトを作成していますが、JQuery で適切な要素を選択するのに苦労しています。私の目標は、 （カテゴリ）アイテム.innerをクリックしたときに（タスク）アイテムを表示/非表示にすることです。.outerメニューを.arrow展開すると回転する s があります。

これは同様の質問であり、付随するjsfiddleです。

元の回答を提供してくれたTats_innitに感謝します。

私はこのHTMLを持っています:

<li class="outer" hook="01">
    <div class="arrow"></div>
    Category 1
</li>
<li class="inner" id="menu-01">
    Task 1
</li>
<li class="inner" id="menu-01">
    Task 2
</li>
<li class="inner" id="menu-01">
    Task 3
</li>

<li class="outer" hook="02">
    <div class="arrow"></div>
    Category 2
</li>
<li class="inner" id="menu-02">
    Task 1
</li>
    <li class="inner" id="menu-02">
    Task 2
</li>
    <li class="inner" id="menu-02">
    Task 3
</li>

そして、このjquery：

$(document).ready(function(){
        $('.outer').click(function(){
            var elem = $('#menu-'+$(this).attr('hook')),
                arrow = $(this).children('.arrow')

            if (!elem.is(':visible'))  {
                arrow.rotate({animateTo:90, duration:128});
            } else {
                arrow.rotate({animateTo:0, duration:128});
            }
            elem.slideToggle('128ms', function() {
            });

        return false;
    });
});

変更する必要があることは理解していますが、 のすべてのインスタンスvar elem = $('#menu-'+$(this).attr('hook'))を表示する方法がわかりません。クラスのホバー状態があるため、要素をネストしませんでした。.inner.innerbackground-color: #f1f1f1;.outer

4

4 に答える 4

1 
<script>
$(document).ready(function(){
    $('li.inner').hide();
    $('.outer').click(function()
    {
        var elem = $(this).attr('hook');
        $('li.inner').hide();
        $(".menu-"+elem).toggle();
    });
});
</script>
<ul>
<li class="outer" hook="01">
<div class="arrow"></div>
Category 1
</li>
<li class="inner menu-01">
Task 1
</li>
<li class="inner menu-01">
Task 2
</li>
<li class="inner menu-01">
Task 3
</li>

<li class="outer" hook="02">
<div class="arrow"></div>
Category 2
</li>
<li class="inner menu-02">
Task 1
</li>
<li class="inner menu-02">
Task 2
</li>
<li class="inner menu-02">
Task 3
</li>
</ul>

2 つの li は同じ ID を持っていないため、最初に li id をクラスに変更します。

于 2013-09-07T19:28:25.417 に答える
1

outerとのセットをinnerにネストできますdiv

<div>
    <li class="outer">
        <div class="arrow"></div>
        Category 1
    </li>
    <li class="inner">
        Task 1
    </li>
    <li class="inner">
        Task 2
    </li>
    <li class="inner">
        Task 3
    </li>
</div>

あなたのjsコードは次のようになります

$('.outer').click(function(){
    var elem = $(this).siblings('.inner'),
        arrow = $(this).children('.arrow')

    if (!elem.is(':visible'))  {
        arrow.rotate({animateTo:90, duration:128});
    } else {
        arrow.rotate({animateTo:0, duration:128});
    }
    elem.slideToggle('128ms', function() {
    });

    return false;
});

background-colorその間、 forouterクラスには影響しません

于 2013-09-07T19:24:41.353 に答える