Question

我正在尝试为响应式网站制作菜单。点击功能已经有效，但我希望当屏幕尺寸小于850像素时菜单向上滑动，但我似乎无法执行该功能。

这是我的代码：

$(document).ready(function () {
      $( "#mobile" ).click(function() {
      $( "#fripple" ).slideToggle();
      $( "#site-navigation" ).slideToggle();
      $( "#secondary" ).slideToggle(); 

        if (screen.width >= 850) {
      $( "#fripple" ).show();
      $( "#site-navigation" ).show();
      $( "#secondary" ).show();
    }

    else if (screen.width < 850){

      $( "#fripple" ).slideUp();
      $( "#site-navigation" ).slideUp();
      $( "#secondary" ).slideUp();
    }


    });
});

Answer 1

我认为不再需要.show()，因为您已slideToggle()显示已更改为block。使用window.screen.width您尝试获取设备原生屏幕分辨率时，请改用$(window).width()。

$(document).ready(function(){
    $('#mobile').click(function(){
        $( "#fripple" ).slideToggle();
        $( "#site-navigation" ).slideToggle();
        $( "#secondary" ).slideToggle(); 


        if($(window).width() < 850){
            $( "#fripple" ).slideUp();
            $( "#site-navigation" ).slideUp();
            $( "#secondary" ).slideUp();
        }
   });
});

菜单幻灯片切换。功能未在屏幕宽度上执行

1 个答案: