-1

ドロップダウンメニューがあり、マウスアウトに遅延を追加したい。そのため、メニューにカーソルを合わせるとドロップダウンが表示されますが、メニューからマウスを移動すると、遅延が発生します。

私はこれを一日中検索しましたが、何も見つかりませんでした。使用方法がわからない hoverIntent プラグインを期待してください。

これが私のコードです：

HTML:

<ul id='nav'>
  <li><a href='#'>Top level 1</a></li>
  <li><a href='#'>Top level 2</a>
    <ul>
      <li><a href='#'>Sub 2 - 1</a></li>
      <li>
        <a href='#'>Sub 2 - 2</a>
        <ul>
          <li>
            <a href='#'>Sub 2 - 2 - 1</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
            </ul>
          </li>
          <li><a href='#'>Sub 2 - 2 - 2</a></li>
          <li>
            <a href='#'>Sub 2 - 2 - 3</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Sub 2 - 3</a></li>
    </ul>
  </li>
</ul>

Jクエリ:

$(document).ready(function(){                   
    $("#nav ul ").css({display: "none"}); 
    $("#nav li").hover(
        function()
            {
                $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();
            },
        function(){
          $(this).find('ul:first').css({visibility: "hidden"});
        }
);

私がjavascriptの初心者だと仮定してください:)

ありがとう！

編集：

私はすべての解決策を試しましたが、パトリシアの解決策を期待してうまくいきませんでした。http://pastehtml.com/view/aykmhy9ae.htmlでわかるように、今では奇妙な動作が発生します

4

5 に答える 5

1

これにより、5秒（5000ミリ秒）の遅延が追加されます...

$(this).find('ul:first').delay(5000).css({visibility: "hidden"});

編集：

詳しくはこちらをご覧ください。

于 2011-06-27T18:46:14.310 に答える
0

遅延よりも段階的なフェードアウトの方が良いと提案できますか？visibility: "hidden"その場合は、コードの代わりに次のことを試してください

$(this).find('ul:first').fadeOut('slow');

ちょっとしたヒント：jQueryを使用して要素を表示/非表示にする場合は、次のものを使用するだけで済みます。

hide(), show(), toggle()
fadeIn(), fadeOut(), fadeToggle()
slideIn(), slideOut(), slideToggle()

設定displayとvisibilityCSSプロパティは無駄です。

于 2011-06-27T18:44:49.257 に答える
0

あなたはこのようなものが欲しいでしょう：

        $("#nav li").hoverIntent({
            over: function(e){
               $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();

            },
            out:function(e){
                $(this).find('ul:first').css({visibility: "hidden"});

            },
            timeout: 1000
        });

ここで、1000は、マウスアウトアクションの遅延が必要なミリ秒数です。

于 2011-06-27T18:46:02.190 に答える
0

settimeoutを使用して、関数の起動を遅らせる必要があります。また、関数がホバリングした場合は、タイムアウトがクリアされていることを確認してください。これにより、1000ミリ秒のタイムアウトが発生します。

$(document).ready(function(){                   
    $("#nav ul ").css({display: "none"}); 
    var onHoverTimeoutFunction = null;
    $("#nav li").hover(
        function()
            {
                onHoverTimeoutFunction = setTimeout(function() {$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();},1000);
            },
        function(){
          clearTimeout(onHoverTimeoutFunction);
          $(this).find('ul:first').css({visibility: "hidden"});
        }
);
于 2011-06-27T18:47:30.123 に答える
0 
 $(function () {
        var timer = null;
        $("li", "#nav").hover(
            function () {
                var element = $(this);
                timer = window.setTimeout(function () { element.find("ul:first").slideToggle(); }, 500);
            },
            function () { window.clearTimeout(timer); $(this).find('ul:first').slideToggle(); }
        );

            $("ul", "#nav").css("display", "none");
    });
于 2011-06-27T19:21:07.403 に答える