3

私は次のようなものを設計しようとしていますL

<ul class="top">
  <li><a href="#">Menu1</a></li>
  <li>
    <a href="#">Menu2</a>
    <ul class="sub">
      <li><a href="#">SubMenu1</a></li>
      <li>
        <a href="#">SubMenu2</a>
        <ul class="subsub">
          <li><a href="#">SubSubMenu1</a></li>
          <li><a href="#">SubSubMenu2</a></li>
        </ul>
      </li>
      <li><a href="#">SubMenu3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu3</a></li>
</ul>

そして、ノードにサブノードがある場合、サブメニューが開くというのが私の考えです。したがって、この例では、ユーザーが Menu2 にカーソルを合わせると、SubMenu1、SubMenu2、および SubMenu3 が表示され、ユーザーが SubMenu2 にカーソルを合わせると、SubSubMenu1、SubSubMenu2 が表示されます。

現在、次のjQueryがあります。

$(document).ready(function () {
  $("ul.top li").hover(function () { //When trigger is hovered...
    if ($("ul.top li").hasClass("sub")) {
      $(this).parent().find("ul.sub").slideDown('fast').show();
      $(this).parent().hover(function () {}, function () {
        $(this).parent().find("ul.sub").slideUp('slow');
      });
    }
  });
});

ただし、Menu1 にカーソルを合わせると、Menu 2 のサブメニューがまだ開いています。

どんな助けでも大歓迎です！

4

1 に答える 1

11

解決する必要がある問題がいくつかあります。まず、hover ()関数に2 つの引数を指定する必要があります。最初の引数は onmouseenter 用の関数で、もう 1 つは onmouseleave 用の関数です。

次に、すべてのサブメニューに同じクラスのタグを付けますsub。これにより、セレクターの作成がはるかに簡単になります。

children()関数を使用して、ユーザーがホバリングしている項目の直接の子にのみアニメーションを適用します。

$(document).ready(function () {
    $("ul.top li").hover(function () { //When trigger is hovered...
        $(this).children("ul.sub").slideDown('fast');
    }, function () {
        $(this).children("ul.sub").slideUp('slow');
    });
});

実施例

于 2013-07-19T12:34:31.180 に答える