0

デスクトップとタブレットに表示されるリンクのリストを作成しようとしていますが、モバイル サイズにサイズを変更すると、複数レベルのドロップダウンの一部になります。私はそれを機能させましたが、ページを更新したときだけです。

チュートリアルで見つけた2つの異なる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');
            }
          }
    );
});
4

1 に答える 1

0

編集：

$(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 の作業例を参照してください

于 2013-10-03T08:59:06.153 に答える