0

この問題は私をかなり長い間混​​乱させ、解決策は結局、古いバージョンのjQueryをGoogleCDNからロードすることを余儀なくされました。

私はこの構造でメニューを作成しました：

<ul>
<li class="top-nav">
<a href="#">Top Item One</a>
<ul class="sub-nav hidden">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
</ul>
</li>

<li class="top-nav">
<a href="#">Top Item Two</a>
<ul class="sub-nav hidden">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
</ul>
</li>

... etc ...

</ul>

非常にシンプルなトグル機能があるので、「トップナビゲーション」をクリックすると、サブナビゲーションが下にスライドして表示されます。

$('li.nav-top>a').toggle(function(){
    $(this).addClass('active');
    $(this).siblings('.nav-sub').slideDown(100);
}, function(){
    $(this).removeClass('active');
    $(this).siblings('.nav-sub').slideUp(100);
});

信じられないほど紛らわしいのは、最新バージョンのjQueryでは、このコードによってすべてのtop-navリストアイテムが折りたたまれて消えてしまうことです。これは単なるトグルであり、トップレベルのアイテムをターゲットにしていないため、理由がわかりません。

（サイトはwww.sjofasting.noです）

4

1 に答える 1

1

セレクターのクラスとマークアップのクラスは同じでtoggle()はなく、非推奨です。上にスクロールしないようにするには、アンカーのデフォルトのアクションを防ぐ必要がありますか？

$('li.top-nav > a').on('click', function(e){
    e.preventDefault();
    $(this).toggleClass('active')
           .next('.sub-nav').slideToggle(100);
});
于 2013-02-04T19:07:07.730 に答える