Question

点击，按钮弹出js做的收缩DIV，等完全弹出后才可以点缩回。

Answer 1

<ul id="a">
  <li>
    <a>Categories</a>
    <ul style="display: none;">
      <li>aaaaa</li>
      <li>aaaaa</li>
      <li>aaaaa</li>
      <li>aaaaa</li>
      <li>aaaaa</li>
      <li>aaaaa</li>
      <li>aaaaa</li>
      <li>aaaaa</li>
      <li>aaaaa</li>
    </ul>
  </li>
</ul>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $('#a>li>a').click(function () {
    if (!$(this).parent().hasClass('animate')) {
      $(this).next().slideToggle(3000, function () { $(this).parent().removeClass('animate') }).parent().addClass('animate');
    }
  })
</script>

追问

能解释下每个代码的功能么,javascript我不会。

追答

$('#a>li>a').click(function () {//点击Categories
    if (!$(this).parent().hasClass('animate')) {//是否有animate样式，以判断是否在收缩或展开动画中
        $(this).next()  //指向a标签后的ul标签
      .slideToggle(3000, //收缩或展开 用时3000毫秒
      function () { //动画结束后执行
        $(this).parent() //指向一级li标签
          .removeClass('animate') //动画结束，删除样式animate
      }).parent() //指向一级li标签
      .addClass('animate'); //添加样式animate，表明动画开始
    }
})