javascript - 获取多级下拉菜单以仅显示在特定浏览器宽度

Question

我正在尝试创建在台式机和平板电脑上可见的链接列表，但是当您将其调整为移动设备大小时，它会成为多级下拉列表的一部分。我已经让它工作了，但只有当我刷新页面时。

我已经尝试过使用在教程中找到的两种不同的 js，并且我确信会有一种更简单的方法来实现这一点。

html

       <ul class="accordion">
            <li>
                <a href="#">America</a>
                <ul>    
                    <li><a href="#">New York</a></li>
                    <li><a href="#">San Fransisco</a></li>
                    <li><a href="#">Washington</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Antarctica</a>
            </li>
            <li>
                <a href="#">Afro-Eurasia</a>
                <ul>
                    <li><a href="#">Amsterdam</a></li>
                    <li><a href="#">Paris</a></li>
                    <li><a class="#">Stockholm</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Australia</a>
                <ul>
                    <li><a href="#">Melbourne</a></li>
                    <li><a href="#">Perth</a></li>
                    <li><a href="#">Sydney</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Google</a>
            </li>
        </ul>

js 用于评估浏览器宽度

(function($){
  $(document).ready(function(){
    var current_width = $(window).width();
    if(current_width < 480){
      jQuery('body').addClass("mobile");
    }
  });

  $(window).resize(function(){
    var current_width = $(window).width();
    if(current_width < 480){
      jQuery('body').addClass("mobile");
    }
  });

})(jQuery);

用于下拉菜单的 js

$(document).ready(function() {
    $('.mobile .accordion ul').hide();
    $('.mobile .accordion li a').click(
        function() {
            var openMe = $(this).next();
            var mySiblings = $(this).parent().siblings().find('ul');
            if (openMe.is(':visible')) {
                openMe.slideUp('normal');  
            } else {
                mySiblings.slideUp('normal');  
                openMe.slideDown('normal');
            }
          }
    );
});

Answer 1

编辑：

$(document).ready(function(){
   setResize();
   resizeCheck();
});
function createMobile() {
   $('.mobile .accordion ul').hide();
   $('.mobile .accordion li a').unbind("click");
   $('.mobile .accordion li a').click(
       function() {         
           var openMe = $(this).next();
           var mySiblings = $(this).parent().siblings().find('ul');
           if (openMe.is(':visible')) {
               openMe.slideUp('normal');  
           } else {
               mySiblings.slideUp('normal');  
               openMe.slideDown('normal');
           }          
         }
   );
};
function resizeCheck() {
   var current_width = $(window).width();      
   if(current_width < 480){
     if(!$('body').hasClass('mobile'))
     {
         $('body').addClass("mobile");
     }
     createMobile();
   }
   else {
       if($('body').hasClass('mobile'))
       {
           $('body').removeClass('mobile');
       }
   }
};
function setResize() {  
   $(window).resize(function() {
       resizeCheck();
   });
};
function removeResize() {
   $(window).unbind('resize');
};

请参阅 jsFiddle上的工作示例