【发布时间】：2014-05-01 13:43:57
【问题描述】：
对 JS /jQuery 有点陌生，因此非常感谢您的帮助...
基本上，我正在构建一个响应式标题，并希望在仅在平板电脑/移动设备分辨率上浏览时启用项目的 onclick 功能。
我一直在尝试解决并编写一个执行以下操作的函数
如果页面已加载，并且宽度为 768 像素或更小，则允许按钮在点击时显示相应的框，然后进行切换。
如果页面被调整大小，最终宽度为 768 像素或更小，则允许按钮在点击时显示相应的框，然后进行切换。
单击第二个按钮时，重置框以隐藏任何先前显示的框（即一次只显示一个框）
调整页面大小时，重置框以隐藏任何先前显示的框
虽然我所写的内容有效，但在调整大小时会出现不一致的行为。有时它会做正确的事情，有时它允许桌面大小窗口的行为，但不允许预期的
我确定我只是犯了一些基本错误？
我做了一个 jfiddle，因为从我所看到的来看，这似乎是这个论坛上的偏好？ http://jsfiddle.net/jezzurp/gT6NQ/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>On Click Show Hide Test V3</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
/* Mobile */
@media only screen and (max-width: 769px) and (min-width:1px)
{
body{background-color:#00FFEA;}
}
div.trigger, div.display {margin:10px;padding:10px;}
div.display {display:none;}
div.display.show {display:block;}
div.trigger1 {background-color:#000000;color:#FD0004;}
div.trigger2 {background-color:#000000;color:#FFEF00;}
div.trigger3 {background-color:#000000;color:#39FF00}
div.trigger4 {background-color:#000000;color:#00C8FF;}
div.display1 {background-color:#FD0004;color:#000000;}
div.display2 {background-color:#FFEF00;color:#000000;}
div.display3 {background-color:#39FF00;color:#000000;}
div.display4 {background-color:#00C8FF;color:#000000;}
</style>
<script>
function menuInteraction() {
$(".display1.display").removeClass("show");
$(".display2.display").removeClass("show");
$(".display3.display").removeClass("show");
$(".display4.display").removeClass("show");
var width = $(window).width();
if ((width < 769)) {
$(".trigger1.trigger").click(function(){
$(".display1.display").toggleClass("show");
$(".display2.display").removeClass("show");
$(".display3.display").removeClass("show");
$(".display4.display").removeClass("show");
});
$(".trigger2.trigger").click(function(){
$(".display2.display").toggleClass("show");
$(".display1.display").removeClass("show");
$(".display3.display").removeClass("show");
$(".display4.display").removeClass("show");
});
$(".trigger3.trigger").click(function(){
$(".display3.display").toggleClass("show");
$(".display1.display").removeClass("show");
$(".display2.display").removeClass("show");
$(".display4.display").removeClass("show");
});
$(".trigger4.trigger").click(function(){
$(".display4.display").toggleClass("show");
$(".display1.display").removeClass("show");
$(".display2.display").removeClass("show");
$(".display3.display").removeClass("show");
});
}
}
$(document).ready(menuInteraction);
$(window).resize(menuInteraction);
</script>
</head>
<body>
<div class="trigger1 trigger">trigger 1</div>
<div class="trigger2 trigger">trigger 2</div>
<div class="trigger3 trigger">trigger 3</div>
<div class="trigger4 trigger">trigger 4</div>
<br/>
<div class="display1 display">display 1</div>
<div class="display2 display">display 2</div>
<div class="display3 display">display 3</div>
<div class="display4 display">display 4</div>
</body>
</html>
【问题讨论】：
-
我查看了您的问题，但无法重现您的不一致之处 - 有关它何时有效/无效以及哪些浏览器/版本会有所帮助的更多信息。要跟踪不一致并找出它们的根本原因，请尝试使用
$(window).resize(function(){alert('resize fired');});，您可以监控 resize 事件何时触发和不触发 - 然后您可以追踪原因。 -
我确实发现与 Chrome 27（Ubuntu 上的 Chromium）不一致。
-
JRulle - 谢谢你，我下次肯定会使用它。我实际上在 FF、Chrome 和我认为 Safari 中也出现了不一致，因此很混乱。
-
它基本上有时会按预期工作，我会玩弄它不断调整大小等，然后最终它会停止工作甚至恢复到与预期相反的状态（触发器适用于更大的分辨率而不是小分辨率的）。
标签： javascript jquery html css javascript-events