废物学Js One day （动画下拉列表）

$(function(){
    var link_height=$(‘.cshall-links‘).height(); //获取Class的高度作为变量
    $(‘.cshall-links‘).height(0);  //设置Class的高度为0

    $(‘.cshall‘).hover(function() {   //设置鼠标经过事件
        $(this).find(‘ul.cshall-links‘).show();   //查找到当前Class的子级元素.show（）方法显示  Ps也可以用.css方法设置
        $(this).find(‘ul.cshall-links‘).animate({‘height‘: link_height},200);// animate 方法添加200ms动画 设置css高度为变量中的高度  即自然高度

    }, function() {
        var _this=$(this);// 定义this 注：这里不可以删除 因为上面已经有使用的选择器所以该处只进行转换
        _this.find(‘ul.cshall-links‘).animate({‘height‘: 0},200,function (){// 方法添加200ms动画 设置css高度为0  即隐藏
            _this.find(‘ul.cshall-links‘).hide();// 当动画执行时js仍然进行运作 所以当一次收起之后就直接隐藏该class
        });
    });
});

<ul class="fn-right">
  
  <li class="cshall">
    <a href="#"> 客户服务 
    <em class="arrow"></em>
    </a>
    <ul class="cshall-links" style="display:none">
      <li><a target="_blank" href="#">服务大厅</a> </li>
     <br />
      <li><a target="_blank" href="#">自助服务</a></li>
      <br />
      <li><a target="_blank" href="#">多提建议</a></li>
      <div class="clearfix"></div>
    </ul>
  </li>
 </ul>

$(function(){
    var links_height= $(".cshall-links").css(‘height‘); 
    $(".cshall-links").css(‘margin-top‘, ‘-‘+links_height);

    $("ul.cshall-links").hover(function() {
            $(".cshall-links").stop().animate({‘margin-top‘:0}, 200);
        }, function() {
            $(".cshall-links").stop().animate({‘margin-top‘:‘-‘+links_height}, 200);
    });
});