0

jquery と hoverintent を使用して水平ドロップダウン メニューを実装しようとしています。ほぼ理解できましたが、ドロップダウン リンクを含む "li" からマウスを離して、topnav の別の "li" に移動すると、メニューはそこにとどまります。

目標:
-ドロップダウン メニューをトリガーするリンクをクリックします -メニュー
の高さが拡張され、ページ コンテンツが押し下げ
られます-サブメニューが表示されます -
サブメニューまたはトリガーからマウスを離すと、メニューが消えます

現時点では、マウスがメニュー上にある限り、サブメニューは引き続き表示されます。

ここでコードを変更しようとしましたが、例のように機能せず、理由がわかりません。
クリックイベントによって開始される HoverIntent jQuery プラグイン

私の HTML:

<div id="menu">
<ul id="topnav">
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a>
    <ul id="subnav">
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
    </ul>
  </li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="noborder"><a class="topnavlink" href="#">Main Link</a></li>
</ul>
</div>

私のJQUERY：

function slideDown() {
    $(this).click(function() {
        $("#menu").stop().animate({height:"68px"}, 200);
        $("ul#subnav").slideDown(200)
    }); 
    }

function slideUp() {
    $("ul#subnav").slideUp(200);
    $("#menu").stop().animate({height:"40px"}, 200);
    }

$("ul#topnav").hoverIntent({
    sensitivity: 7,
    interval: 100,
    over: slideDown,
    timeout: 500,
    out: slideUp
})
4

1 に答える 1

0

スーパーフィッシュをご覧になりましたか？

http://users.tpg.com.au/j_birch/plugins/superfish/

于 2011-04-07T21:03:34.883 に答える