Question

我有一个搜索表单，我希望在桌面尺寸（992px +）上始终可见，并通过切换按钮隐藏在移动设备上。 至关重要的是，我还希望在用户提交搜索表单后折叠表格。

上述所有功能都按预期工作，除非您将浏览器窗口的大小从小于992px调整到992px以上，提交按钮仍然隐藏搜索表单 - 这不应该发生。没有调整大小，一切正常。

这可以在this 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

你在这里

＆＃13;

// 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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

jQuery函数仍然在$（window）.resize之后触发

2 个答案: