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

Sorry if I didn't understand it correctly. But you can add a new function when the animation is done to remove the text of the links: 

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

If you add overflow: hidden to #adminmenuback then the text will disappear based on the width.

于 2013-09-05T06:59:25.413 回答
0

给你想要消失的项目一个 id，然后$('#idOfObject').fadeOut()用来隐藏它。

如果你想让他们重新出现使用$('#idOfObject').fadeIn()

于 2013-09-05T06:56:35.910 回答