Question

要求：水平导航在900px或以上，垂直在900以下。但是在900或以下，导航器应默认隐藏，仅在单击“标题”时显示

到目前为止我所拥有的： http://jsfiddle.net/0rmgpjtr/3/

   $(document).ready(function(){

$('.dropdown ul:first').show();
    $('.dropdown ul:first').css("display:table");
    $('.dropdown li').click(function (e) {
                $(this).addClass('active').siblings('li').removeClass('active');
                $(this).children('ul').slideToggle('fast');
                $(this).siblings('li').find('ul').slideUp('fast');
                e.preventDefault();
                e.stopPropagation();

          });
              $(document).on('click', function (event) {
                $('.dropdown li').children('ul').slideUp('fast');
              });

});
$(window).on("resize", function () {

     if($(window).width()<=900){
         console.log("800");
        $('.ch-logo').bind('click',function(){
            $('.dropdown').slideToggle('fast');
        })
    }else{
                 console.log("900+");
        $('.ch-logo').unbind()
    }

}).resize();

问题： 1.绑定和解除绑定标题点击事件不起作用 2.当我点击父链接打开subnav时，它在我调整浏览器大小后闪烁 - 实际上任何交互，开始闪烁菜单，可能是因为它与调整大小功能相关联。

Answer 1

http://jsfiddle.net/extca38f/

$(window).on("resize", function () {

     if($(window).width()<=900){
         console.log("800");
         $('.dropdown').hide();
        $('.ch-logo').bind('click',function(){
            $('.dropdown').toggle();
        });
     }else{
         $('.dropdown').show();
     }
}).resize();

Answer 2

使用toggle代替slidetoggle Demo Here

$(window).on("resize", function () {

     if($(window).width()<=900){
         console.log("800");
         $('.dropdown').hide();
        $('.ch-logo').bind('click',function(){
            $('.dropdown').toggle('slow');
        });
     }else{
         $('.dropdown').show();
     }
}).resize();

Check the differnce between toggle and slidetoggle

响应式jquery nav交互 - 调整大小的问题

2 个答案: