允许在不同屏幕尺寸的菜单上显示和隐藏的功能

Question

Bit new to JS /jQuery so any help greatly appreciated...对 JS /jQuery 有点陌生，因此非常感谢您的帮助...

Basically I'm building a responsive header and want to enable onclick functions to the items for when browsing on tablet/mobile resolutions only.基本上我正在构建一个响应式标题，并希望仅在平板电脑/移动分辨率上浏览时启用项目的onclick功能。

I have been trying work out and write a function that does the following:我一直在尝试解决并编写一个执行以下操作的函数：

If the page is loaded, and is 768px or less wide, allow buttons to reveal corresponding box on click, and toggle.如果页面已加载，并且宽度为 768 像素或更小，则允许按钮在单击时显示相应的框，然后进行切换。
If the page is resized, and ends up being 768px or less wide, allow buttons to reveal corresponding box on click, and toggle.如果页面被调整大小，并且最终宽度为 768 像素或更小，则允许按钮在单击时显示相应的框，然后进行切换。
When second button is clicked, reset the boxes to hide any previously revealed box (ie only show one of the boxes at a time)单击第二个按钮时，重置框以隐藏任何先前显示的框（即一次只显示一个框）
When the page is resized, reset the boxes to hide any previously revealed box调整页面大小时，重置框以隐藏任何先前显示的框

Whilst what I have written works, I get inconsistent behaviour when resizing.虽然我所写的内容有效，但在调整大小时我会出现不一致的行为。 Sometimes it does the right thing, sometimes it allows the behaviour for desktop size window but not for the intended <768px and vice versa.有时它会做正确的事情，有时它允许桌面大小窗口的行为，但不允许预期的 <768px 行为，反之亦然。

I am sure I am just making basic mistakes?我确定我只是犯了基本的错误？

I made a jfiddle as that seems to be preference on this forum from what I have seen?我做了一个 jfiddle，因为从我所看到的来看，这似乎是这个论坛上的偏好？ http://jsfiddle.net/jezzurp/gT6NQ/ 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>

Answer 1

The issue is that when the width becomes again greater than 768, you don't remove the event handlers, so they still act.问题是当宽度再次大于 768 时，您不会删除事件处理程序，因此它们仍然起作用。 Actually, I don't understand why it is inconsistent, it should consistently not work...实际上，我不明白为什么它不一致，它应该始终不起作用......

Anyway, removing the handlers when the width is greater than 768 fixes the problem:无论如何，当宽度大于 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>

允许在不同屏幕尺寸的菜单上显示和隐藏的功能

问题描述

1 个解决方案

解决方案1
0 2014-05-01 05:39:20

允许在不同屏幕尺寸的菜单上显示和隐藏的功能

问题描述

1 个解决方案

解决方案1 0 2014-05-01 05:39:20

解决方案1
0 2014-05-01 05:39:20