Jquery——手风琴效果+表格全选

手风琴样式与控件1

<style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
      width: 1300px;
    }

    #box {
      width: 1200px;
      height: 400px;
      border: 2px solid red;
      margin: 100px auto;
    }

    #box li {
      width: 240px;
      height: 400px;
      /*border: 1px solid #000;*/
      float: left;
    }
  </style>
  
<div id="box">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

脚本

<script src="jquery-1.12.4.js"></script>
  <script>
    $(function () {
      var $li = $("#box li");
      for (var i = 0; i < $li.length; i++) {
        $li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");
      }
      //给所有的li注册鼠标经过事件
      $li.mouseenter(function () {
        $(this).stop().animate({
          width: 800
        }).siblings().stop().animate({
          width: 100
        });
      }).mouseleave(function () {
        $li.stop().animate({
          width: 240
        });
      });
    });
  </script>

手风琴样式与控件2

css + body

<style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style-type: none;
    }

    .parentWrap {
      width: 200px;
      text-align: center;
    }

    .menuGroup {
      border: 1px solid #999;
      background-color: #e0ecff;
    }

    .groupTitle {
      display: block;
      height: 20px;
      line-height: 20px;
      font