个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-03 18:12:37 24 4
gpt4 key购买 nike

对 JS/jQuery 有点陌生，所以非常感谢任何帮助...

基本上，我正在构建一个响应式 header ，并希望仅在平板电脑/移动分辨率上浏览时为元素启用 onclick 功能。

我一直在尝试编写一个执行以下操作的函数:

  • 如果页面已加载且宽度为 768 像素或更小，则允许按钮在点击时显示相应的框并切换。

  • 如果调整页面大小，最终宽度为 768 像素或更小，允许按钮在点击时显示相应的框并切换。

  • 单击第二个按钮时，重置框以隐藏任何先前显示的框(即一次只显示一个框)

  • 调整页面大小时，重置框以隐藏之前显示的任何框

虽然我编写的内容有效，但在调整大小时出现不一致的行为。有时它会做正确的事情，有时它允许桌面大小窗口的行为但不允许预期的 <768px，反之亦然。

我确定我只是在犯基本错误？

我制作了一个 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>

最佳答案

问题是当宽度再次大于 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>

关于javascript - 允许在不同屏幕尺寸的菜单上显示和隐藏的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23400740/

24 4 0
文章推荐： html - 我的 Bootstrap 导航栏不工作
文章推荐： php - 发送python html邮件看不到邮件的内容
文章推荐： c# - WPF 中组合框的名称
文章推荐： python - 使用Python + BeautifulSoup提取网页表格中的文本
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com