JS / jQuery的新手,因此非常感谢您的帮助...
基本上,我正在构建响应式标题,并希望仅在平板电脑/移动分辨率上浏览时才启用项目的onclick功能。
我一直在尝试锻炼并编写执行以下操作的函数
如果页面已加载且宽度为768px或更小,请允许按钮在单击时显示相应的框,然后进行切换。
如果页面已调整大小,最终宽度为768px或更小,请允许按钮在单击时显示相应的框,然后进行切换。
单击第二个按钮时,重置框以隐藏以前显示的任何框(即一次仅显示其中一个框)
调整页面大小后,请重置框以隐藏任何先前显示的框
虽然我写的作品行得通,但在调整大小时会出现不一致的行为。有时它做正确的事,有时它允许桌面大小窗口的行为,但不允许
我确定我只是犯了基本错误?
我做了一个小提琴,因为从我所看到的来看,这似乎是该论坛上的偏爱? 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>
最佳答案
问题是,当宽度再次大于768时,您不会删除事件处理程序,因此它们仍然起作用。实际上,我不明白为什么它会不一致,它应该始终不起作用...
无论如何,当宽度大于768时删除处理程序可解决此问题:
<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");
});
} else {
$(".trigger1.trigger").off("click");
$(".trigger2.trigger").off("click");
$(".trigger3.trigger").off("click");
$(".trigger4.trigger").off("click");
}
}
$(document).ready(menuInteraction);
$(window).resize(menuInteraction);
</script>