Javascript 宽度更改时隐藏元素_Javascript_Jquery_Html_Css

Javascript 宽度更改时隐藏元素

javascript jquery html css

Javascript 宽度更改时隐藏元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有这个问题，因为当窗口宽度超过766px时，我正在尝试隐藏菜单。这是我的代码，但不是工作 HTML 但当我在677px上点击汉堡和菜单幻灯片，然后将窗口调整到766px以上时，一切都正常。感谢您的帮助问题：- 窗口宽度检查代码不会在每次调整窗口大小时运行解决方案：- 使用方法如下：- $(window).resize(function(){ if($(window).width() > 766){ $('.submenu').hide(); }else{ con

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

HTML

但当我在677px上点击汉堡和菜单幻灯片，然后将窗口调整到766px以上时，一切都正常。感谢您的帮助问题：-

窗口宽度检查代码不会在每次调整窗口大小时运行

解决方案：-

使用方法如下：-

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

注意：-其余代码正常。

问题：-

窗口宽度检查代码不会在每次调整窗口大小时运行

解决方案：-

使用方法如下：-

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

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

您可以使用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');
     };
 }

您可以使用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');
     };
 }

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

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

代码笔-

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

检查加载时的屏幕宽度，如果宽度大于766px，则隐藏。子菜单

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

使用Jquery，请执行以下步骤

如果（$（窗口）.width（）>766）{ $（'.submenu'）.hide（）； }

$（窗口）。调整大小（函数（）{ 如果（$（窗口）.width（）>766）{ $（'.submenu'）.hide（）； } 否则{ $（'.submenu'）.show（）；//添加else条件以显示条件是否失败 console.log（'halo'）； }; });

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

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