Question

我正在建立一个网站，并通过使用媒体查询使其响应。我希望能够通过使用jquery点击事件（通过点击汉堡包菜单隐藏和显示菜单）在较小的屏幕（500px＆lt;）上切换菜单。我还没有显示代码。有关如何做的任何建议吗？

Answer 1

无需关闭点击事件，只需将逻辑放在

中

$('button').on('click', function() {
  var ww = $(window).width();
  if (ww < 500) {
    console.log('click triggered at less than 500px');
  } else {
    console.log('click ignored! window >= 500px');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button>CLick me</button>

Answer 2

您可以将此代码用于hamburgur menu.add此代码。设置按钮class =＆＃34; hamburgur＆＃34;的默认css。 display：none.then添加媒体查询以显示：当屏幕大小小于500px时阻止。

＆＃13;

$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});

$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});

＆＃13;

body{
  font-family: 'Noto Sans', sans-serif;
	margin:0;
	width:100%;
	height:100vh;
  	background:#ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
header{
	width:100%; 
	background:#ffffff; 
	height:60px; 
	line-height:60px;
	border-bottom:1px solid #dddddd;
}
.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:7px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1;  position:absolute; text-align:center; font-size:12px;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
.menu ul li a:hover {  color: #666; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}
header{display:inline-block; font-size:12px;}
span{padding-left:20px;}
a{color:#336699;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<header>
	<span>Author : <a href="http://glennsmith.me" target="_blank">Glenn Smith</a></span>
  <button class="hamburger">&#9776;</button>
  <button class="cross">&#735;</button>
</header>

<div class="menu">
  <ul>
    <a href="#"><li>LINK ONE</li></a>
    <a href="#"><li>LINK TWO</li></a>
    <a href="#"><li>LINK THREE</li></a>
    <a href="#"><li>LINK FOUR</li></a>
    <a href="#"><li>LINK FIVE</li></a>
  </ul>
</div>

＆＃13;

Answer 3

获取元素，放置单击侦听器并通过更改元素上的样式进行切换。使用vanilla它更好，因为它更快，它是每个其他库的核心。

＆＃13;

var menu = document.getElementById('menu');

menu.addEventListener('click', function(x) {

  x.target.style.display = 'none';

})

＆＃13;

<div id="menu">menu</div>

＆＃13;

如何使JQUERY点击事件仅适用于特定的屏幕尺寸？

3 个答案: