$（window）.resize之后jQuery函數仍然觸發

Question

我有一個搜索表單，希望在桌面尺寸（992px +）上始終可見，並通過切換按鈕隱藏在移動設備上。 至關重要的是，我還希望用戶提交搜索表單后將其折疊起來。

除了將瀏覽器窗口的大小從小於992px調整為大於992px時，上述所有功能均按預期工作，但提交按鈕仍會隱藏搜索表單-不應發生這種情況。 一切正常，無需調整大小。

這可以在此JSFiddle中復制。

這是我的代碼：

提交后隱藏搜索表單

// Close search form on mobile when clicking search input
$(document).ready(function() {
  var $window = $(window);

  function checkWidth() {
    var windowsize = $window.width();

    if (windowsize < 992) {
      $('#search-form input').unbind().click(function() {
        $('#search-form').slideToggle(250).removeClass('open');
        $('a.search-toggle').removeClass('open');
      });
    }
  }
  // Execute on load
  checkWidth();
  // Bind event listener
  $(window).resize(checkWidth);
});

表單切換按鈕（隱藏在桌面尺寸下）：

// Hide/show search form on mobile 
$(document).ready(function() {
  $('a.search-toggle').click(function(event) {
    event.preventDefault();
    $(this).toggleClass('open');
    $('#search-form').slideToggle(250, function() {
      $('#search-form').toggleClass('open', $(this).is(':visible'));
    });
  });
});

Answer 1

這個給你

 // Hide/show search form on mobile $(document).ready(function() { $('a.search-toggle').click(function(event) { event.preventDefault(); $(this).toggleClass('open'); $('#search-form').slideToggle(250, function() { $('#search-form').toggleClass('open', $(this).is(':visible')); }); }); }); // Close search form on mobile when clicking search input $(document).ready(function() { var $window = $(window); var inMobileMode = false; var inDesktopMode = false; function checkWidth() { var windowsize = $window.width(); if (windowsize < 992 && !inMobileMode) { $('#search-form input').click(function() { $('#search-form').slideToggle(250).removeClass('open'); $('a.search-toggle').removeClass('open'); }); inMobileMode = true; inDesktopMode = false; } else if(windowsize >= 992 && !inDesktopMode) { $('#search-form input').off('click'); $('#search-form').slideDown(250).addClass('open'); inDesktopMode = true; inMobileMode = false; } } // Execute on load checkWidth(); // Bind event listener $(window).resize(checkWidth); }); 

 body{ background: #fff; } #search-form{ padding: 30px; background: #eee; } @media ( min-width: 992px ){ a.search-toggle{ display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="search-toggle">Toggle search form</a> <div id="search-form"> <input type="Submit" value="Search"> </div> 

Answer 2

您不需要運行任何腳本即可實現想要實現的行為。

這是僅CSS的解決方案：

 label:hover { cursor: pointer; } input[type=checkbox] { position: absolute; clip: rect(0, 0, 0, 0); } #search-form { padding: 20px; background-color: grey; display: none; /* hide search form by default */ } /* This does the whole magic */ input:checked+#search-form { display: block; } 

 <label for="searchToggle"> Toggle search </label> <input id="searchToggle" type="checkbox"> <div id="search-form"> <input type="Submit" value="Search"> </div>