0

ナビゲーション メニューを切り替え、5 秒後に閉じる jQuery スクリプトがあります。

<script>
  $(function() {
    function toggleMenu() {
      $( "#menu-nav" ).toggle( "blind", 500 );
    };
     $( ".nav-open" ).click(function() {
      toggleMenu();
      setTimeout(function(){
         $( "#menu-nav" ).toggle( "blind", 500 );
     }, 5000);
    });
  });
  </script>

それはうまくいきます。

また、ユーザーがリンクのいずれかをクリックしたときにメニューを閉じるようにします。

 <script>
  $(function() {
    function closeMenu() {
      $( "#menu-nav" ).toggle( "blind", 500 );
    };
     $( ".nav-close" ).click(function() {
      closeMenu();
      return false;
    });
  });
  </script>

それもうまく機能します。

問題は、ユーザーがリンクをクリックしたときにタイマーがまだ実行されていることです。5 秒のマークに到達するとトグルし、メニューが再表示されます。次に、ユーザーがメニューを表示する要素をクリックすると、メニューが閉じますが、タイマーが再起動し、5 秒後にメニューが表示され、すべてがうまくいきません。

2 番目のスクリプトで最初のスクリプトのタイマーをキャンセルする方法を教えてください。

ご協力いただきありがとうございます。

4

4 に答える 4

2

これを使って：

$(function() {
    var timer, menuNav = $("#menu-nav");

    function toggleNav(){ menuNav.toggle("blind", 500); }

    $( ".nav-open" ).click(function() {
        toggleNav();
        timer = setTimeout(function(){
            toggleNav();
        }, 5000);
    });
    $( ".nav-close" ).click(function(e) {
        e.preventDefault();
        window.clearTimeout(timer);
        toggleNav();
    });
});
于 2013-05-24T13:56:02.083 に答える
1

を使用せず、代わりにandをtoggle()使用してください。show()hide()

于 2013-05-24T13:56:42.710 に答える
1 
// when setting the timer
var id = setTimeout(...);

// before executing any other task, cancel timer:
clearTimeout(id);
于 2013-05-24T13:55:25.397 に答える