Question

我有疑问，因为我在窗口宽度超过766px时尝试隐藏菜单。这是我的代码但没有工作

HTML

<div class="menu">
    <div class="burger-menu">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <ul class="submenu">
        <li><a href="#about-me">O mnie</a></li>
        <li><a href="">Prace</a></li>
        <li><a href="">Certyfikty</a></li>
        <li><a href="">Cennik</a></li>
        <li><a href="">Kontakt</a></li>
    </ul>
</div>

JQuery的

//Burger menu

$('.burger-menu').click(function(){

  $(this).toggleClass('open');

});

//Menu list

$('.burger-menu').click(function(){
    $('.submenu').slideToggle();    
});


if($(window).width() > 766){
    $('.submenu').hide();
}else {
    console.log('halo');
};

一切正常但是当我点击汉堡和菜单幻灯片例如在677px上然后调整窗口大小仍然超过766px菜单。感谢您的帮助

Answer 1

您可以使用CSS媒体查询，但由于您需要jQuery ...在窗口调整大小时，您需要检查窗口的宽度。使用您的代码，它只运行一次。

$('.burger-menu').click(function(){

  $(this).toggleClass('open');

});


//Menu list

$('.burger-menu').click(function(){
    $('.submenu').slideToggle();    
});


 $(window).resize(function(){
     if($(window).width() > 766){
        $('.submenu').hide();
     }else {
         console.log('halo');
     };
 }

Answer 2

要达到预期效果，请使用 CSS

@media (min-width: 766px) {
  .submenu {
    display: none;
  }
}

Codepen - https://codepen.io/nagasai/pen/yXRVOe

其他选项使用Jquery ，进行以下更改以适应调整大小和页面加载

检查加载时的屏幕宽度，如果宽度超过766px，请隐藏.submenu
在窗口调整大小时，如果屏幕宽度小于766px则显示.submenu并隐藏，如果超过766px

使用Jquery，按照以下步骤

if（$（window）.width（）＆gt; 766）{ $（＆＃39; .submenu＆＃39;）。隐藏（）; }

$（窗口）.resize（函数（）{ if（$（window）.width（）＆gt; 766）{ $（＆＃39; .submenu＆＃39;）。隐藏（）; } 其他{ $（＆＃39; .submenu＆＃39;）。show（）; //添加其他条件以显示条件是否错误的console.log（＆＃39;卤素＆＃39）; }; }）;

https://codepen.io/nagasai/pen/vZVyyz

Answer 3

问题： -

当您调整窗口大小时，窗口宽度检查代码不会每次都运行。

<强> 解决方案： -

使用jQuery resize()，如下所示： -

$(window).resize(function(){
  if($(window).width() > 766){
    $('.submenu').hide();
  }else{
    console.log('halo');
   //add $('.submenu').show(); to show menu
  }
});

注意： - 其余代码都是Ok。

Answer 4

你应该在jquery中调用resize函数 //隐藏div的功能 function hideDiv（）{

if ($(window).width() < 1024) {

        $("#floatdiv").fadeOut("slow");

}else{

    $("#floatdiv").fadeIn("slow");

}

}

//run on document load and on window resize
$(document).ready(function () {

//on load
hideDiv();

//on resize
$(window).resize(function(){
    hideDiv();
  });

});

或者您可以使用css媒体查询：

   /* always assume on smaller screen first */

 #floatdiv {
  display:none;
 }

/* if screen size gets wider than 1024 */

 @media screen and (min-width:1024px){
    #floatdiv {
      display:block;
  } 
 }

宽度更改时隐藏元素

4 个答案: