Question

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

请和我一起露面，因为我是js的菜鸟。

我尝试过在教程中找到的两个不同的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);

下拉列表

$(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

获取多级下拉列表仅显示在特定浏览器宽度

1 个答案: