Question

我使用以下脚本进行侧面板折叠：

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

它的工作正常，唯一的是我想要链接的名称（例如，它写成“dashbord”）在我将侧面板（#adminmenuback）的宽度折叠到5％时消失。这是jsfiddle：http://jsfiddle.net/kF38Q/ 提前谢谢

Answer 1

将要删除的项目设为ID，然后使用$('#idOfObject').fadeOut()隐藏它。

如果您希望它们重新出现，请使用$('#idOfObject').fadeIn()

Answer 2

很抱歉，如果我没有正确理解它。但是，您可以在完成动画时添加新功能以删除链接文本：

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

如果您将overflow: hidden添加到#adminmenuback，则文本将根据宽度消失。

事件发生时如何使内容消失

2 个答案: