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

【问题标题】：responsive jquery nav interaction - issue on resize响应式 jquery nav 交互 - 调整大小问题
【发布时间】：2015-03-12 19:48:34
【问题描述】：

要求：水平导航在 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.当我点击父链接打开子导航时，我调整浏览器大小后它会闪烁 - 实际上任何交互，开始闪烁菜单，可能是因为它与调整大小功能相关。

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案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();

【讨论】：

抱歉，没用。请检查。当我从小于 900 调整到更多时，菜单消失并且永远不会回来，并且标题链接不可点击

【解决方案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

【讨论】：

同样的问题。加载时效果很好，但调整大小后，单击标题，它开始闪烁。