3

下のようなメニューがあります。ホバー時またはクリック時に第 1 レベルの子を表示したい (そのため、iPad でも機能します)。第 1 レベルの子をホバリング (またはクリック) すると、第 2 レベルの子が存在する場合に表示されます。ホバーアウトまたは別の DOM 要素をクリックすると、すべてのサブメニューが再び非表示になります。

また、ユーザーがページにいるときは、別のメニュー項目にカーソルを合わせるかクリックするまでメニューを折りたたんで、ナビゲーションのどこにいるのかをいつでも確認できるようにしたいと考えています。

バックエンドを使用してナビゲーション メニューを作成および変更できるはずの友人のために、これを Wordpress で構築しています。したがって、一部の要素に特定のクラスまたは ID を追加することはできません。

<style>
.sub-menu {display: none;}
</style>


<ul class="menu">
  <li>child 1
    <ul class="sub-menu">
      <li>child 1.1
        <ul class="sub-menu">
          <li>child 1.1.1</li>
          <li>child 1.1.2</li>
        </ul>
      </li>
      <li>child 1.2
        <ul class="sub-menu">
          <li>child 1.2.1</li>
          <li>child 1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>child 2
    <ul class="sub-menu">
      <li>child 2.1</li>
      <li>child 2.2</li>
    </ul>
  </li>
</ul>

これは私が思いついたものですが、うまくいきません。子 1.1 にカーソルを合わせると、1.1 と 1.2 の両方の兄弟が表示されます。

$("ul.menu li").hover(function() { 
    $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
} , function() {  
    $(this).find("ul.sub-menu").hide(); 
});

$("ul.menu li ul.sub-menu").hover(function() { 
    $(this).find("ul.sub-menu").slideDown(); 
} , function() { 
    $(this).find("ul.sub-menu").hide(); 
});
4

2 に答える 2

3

を直接ターゲットにして、次の解決策を試してください。ul

ソリューション A :

//  previous (following) is very inefficient and slow:
//   -- $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
//  Rather, target the exact ULs which are Direct Children

$("ul.menu").find('li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').slideUp();
        //  If something Slides Down, it should slide up as well,
        //  instead of plain hide(), your choice - :)
    }
);

ソリューション B :

両方のULでより高い精度を実現

更新：ソリューションAは正常に機能し、Bは冗長になります 

$("ul.menu").find('> li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').hide();
    }
);

$("ul.sub-menu").find('> li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').hide();
    }
);

フィドルをチェック

于 2012-07-04T17:11:56.613 に答える
0

これはテストされていません..少し拡張する必要があります。

$('ul.menu li').siblings('ul:first-child').on('click', function() {
if($(this).is(':visible')) {
    $(this).hide();
}
else {
    $(this).show(); 
}
})

$('ul.menu li').siblings('ul:first-child').hover(
function() {
    $(this).show();
},
function() {
    $(this).hide();
}
)

編集：私が見るように、あなたの構造には一貫性がありません。リストをli要素に配置することもあれば、兄弟として配置することもあります...

于 2012-07-04T16:00:42.377 に答える