1

ここに投稿するのは初めてですが、調査するときはいつもここに最初に来ます。とにかく、私はどこでも検索しましたが、私の問題に対する確実な解決策を見つけることができません。ここに問題があります。jQuery 1.9.1 と slideToggle 関数を使用して垂直スライド メニューを作成しました。私はjsFiddle http://jsfiddle.net/JWaXM/1/に例を入れました

<li class="topnav"><a href="#">ITEMS LIST 1</a>
<ul>
    <li class="subnav">ITEM 1
        <ul>
            <li>List subitem 1</li>
            <li>List subitem 2</li>
        </ul>
    </li>
    <li class="subnav">ITEM 2
        <ul>
            <li>List subitem 1</li>
            <li>List subitem 2</li>
        </ul>
    </li>
 </ul>
</li>

<li class="topnav"><a href="#">ITEMS LIST 2</a>
<ul>
    <li class="subnav">ITEM 1
        <ul>
            <li>List subitem 1</li>
            <li>List subitem 2</li>
        </ul>
    </li>
    <li class="subnav">ITEM 2
        <ul>
            <li>List subitem 1</li>
            <li>List subitem 2</li>
        </ul>
    </li>
 </ul>
</li>

<script type="text/javascript">
$(document).ready(function(){
$(".topnav, .subnav").click(function(event){
 event.stopPropagation();
 $(this).children("ul").slideToggle();
});
});
</script>

メニューはうまく機能しますが、別の子メニューを開いたときに前の子メニューを閉じる方法を理解する必要があります。また、親と子を区別して、トップナビまたはサブナビを閉じる方法が必要です。私はjQuery全体に不慣れですが、ゆっくりと学んでいます。助けてくれてありがとう。

4

2 に答える 2

1

クリックした要素の兄弟のすべての子を上にスライドできます。

$(this).siblings().children('ul').slideUp();

topnavそうすれば、クリックされた要素がまたは要素であったかどうかを知る必要がなくなり、必要なsubnav数のネストされた がサポートされます<ul>

デモ

于 2013-03-27T15:12:25.303 に答える
0

試す

$(document).ready(function(){
    $(".topnav, .subnav").click(function(event){
        event.stopPropagation();
        $(this).closest('ul').find('.active').stop().slideToggle().removeClass('active');
        $(this).children("ul").slideToggle().addClass('active');
    });
});

デモ:フィドル

于 2013-03-27T15:09:46.780 に答える