宽度变化时隐藏元素

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 ，进行以下更改以调整大小和页面加载

1. 检查加载时的屏幕宽度，如果宽度大于766px，请隐藏.submenu

2. 调整窗口大小时，如果屏幕宽度小于766px，则显示.submenu；如果大于766px，则隐藏

   使用Jquery，请按照以下步骤操作

   if（$（window）.width（）> 766）{$（'。submenu'）。hide（）; }

   $（window）.resize（function（）{if（$（window）.width（）> 766）{$（'。submenu'）。hide（）;} else {$（'。submenu'）。show（ ）; //添加else条件以显示条件是否失败console.log（'halo'）;};}）;

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
  }
});

注意：-其余代码还可以。

Answer 4

您应该在jquery中调用resize函数//该函数隐藏div函数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;
  } 
 }