0

サイドパネルの折りたたみに次のスクリプトを使用しています。

<script>

$(document).ready(function(){
$('.collaps').addClass('collaps_on');
  var showFlag=1
  $('.collaps').click(function() {
   if(showFlag==1){
     $('#adminmenuback').animate({width:"5%"});
     $('.three-fourth').animate({width:"93%"});
       $('ul.admin-menu li a').addClass("newgradient");

     if($('.collaps').hasClass("collaps_on") ){
        $('.collaps').addClass("collaps_off");
        $('.collaps').removeClass("collaps_on");

     }
     else{
     $('.collaps').addClass("collaps_on");
     $('.collaps').removeClass("collaps_off");

     }

      showFlag=0;
   }else{
   $('ul.admin-menu li a').removeClass("newgradient");
     $('#adminmenuback').animate({width:"17%"});
     $('.three-fourth').animate({width:"81%"});

             if($('.collaps').hasClass("collaps_off") ){
        $('.collaps').addClass("collaps_on");
        $('.collaps').removeClass("collaps_off");

     }
     else{
     $('.collaps').addClass("collaps_off");
     $('.collaps').removeClass("collaps_on");

     }

    showFlag=1;
   }     
  });
});

</script>

サイドパネルの html は次のようになります。

<section class="one-fourth" id="adminmenuback">
    <ul class="admin-menu">

    <li><a href="#" class="collaps">button</a></li>
    <li><a href="#"> <span class="home"></span>Dashboard </a></li>
    <li><a href="#"> <span class="home"></span>Dashboard </a></li>

    </ul>


</section>

うまく動作します。唯一のことは、サイドパネル (#adminmenuback) の幅を 5% に折りたたむと、リンクの名前 (たとえば、「dashbord」と書かれている場所) が消えるようにすることです。ここにjsfiddleがあります：http://jsfiddle.net/kF38Q/事前 に感謝します

4

2 に答える 2

0

消したいアイテムにIDを付けてから、それ$('#idOfObject').fadeOut()を非表示にするために使用します。

それらを再表示したい場合は、$('#idOfObject').fadeIn()

于 2013-09-05T06:56:35.910 に答える
0

正しく理解できていなかったらすみません。ただし、アニメーションが完了したら、リンクのテキストを削除する新しい関数を追加できます。

$('#adminmenuback').animate({width:"5%"}, function(){
          $('#adminmenuback a').text('');
        }

#adminmenubackに追加overflow: hiddenすると、幅に基づいてテキストが非表示になります。

于 2013-09-05T06:59:25.413 に答える