0

以下は基本的なドロップダウンメニューで、親テキストにカーソルを合わせると子が表示されます。

<script type="text/javascript">
  $(document).ready(function () { 
    $('#nav ul').hide();

    $('#nav li > a').hover(
      function () {$('ul', this.parentNode).stop().slideDown(100);}
    );

   $('#nav li').hover(null, 
      function (e) {$('ul', this.parentNode).stop().slideUp(100);}
   );

  }
  );
</script>

<ul id="nav">
  <li><a href="#">Parent A</a>
    <ul>
      <li><a href="#">Sub a1</a>
          <ul>
            <li><a href="#">Item a1.1</a></li>
            <li><a href="#">Item a1.2</a></li>
            <li><a href="#">Item a1.3</a></li>
        </ul> 
      </li>
      <li><a href="#">Sub a2</a></li>
      <li><a href="#">Sub a3</a></li>
    </ul>
  </li>
  <li><a href="#">Parent B</a>
    <ul>
      <li><a href="#">Sub b1</a></li>
      <li><a href="#">Sub b2</a></li>
      <li><a href="#">Sub b3</a></li>
    </ul> 
  </li>
</ul>

サブメニューの下の3番目のレベルの上に追加しましたが、最後のレベルを開いたり閉じたりしていません。

この場合、htmlコードを変更する必要があるのか​​、それともスクリプトが正しく機能するように変更する必要があるのはJavaScriptだけなのかわかりません。

4

1 に答える 1

2

あなたは次のようにそれを行うことができます：

   $('#nav ul').hide();

   $('#nav li > a').hover(
      function () {
      //show its submenu
        $(this).parent().children('ul').stop().slideDown(100);
      }
    );
   $('#nav li').hover(null, 
      function (e) {
      //hide its submenu
        $(this).children('ul').stop().slideUp(100);
      }
   );

作業デモを見る

于 2012-12-11T00:32:34.350 に答える