javascript - 响应式 jquery 导航交互 - 调整大小问题

Question

要求: 900 像素或以上的水平导航和 900 像素以下的垂直导航。但在900以下，nav应该默认隐藏，只有在点击“header”时才会出现

我目前拥有的: 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.绑定(bind)和解除绑定(bind)标题点击事件不起作用 2. 当我点击父链接打开子导航时，在我调整浏览器大小后它会闪烁 - 实际上任何交互都会开始闪烁菜单，可能是因为它与调整大小功能相关。

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