超简单手风琴效果制作

手风琴最终效果如下：

要实现以上效果非常简单，无需插件的

Step.1

html结构创建

<div id="firstpane" class="menu_list"> 

        <p class="menu_head">Header-1</p>

        <div class="menu_body">

        <a href="#">Link-1</a>

         <a href="#">Link-2</a>

         <a href="#">Link-3</a>    

        </div>

        <p class="menu_head">Header-2</p>

        <div class="menu_body">

            <a href="#">Link-1</a>

         <a href="#">Link-2</a>

         <a href="#">Link-3</a>    

        </div>

        <p class="menu_head">Header-3</p>

        <div class="menu_body">

          <a href="#">Link-1</a>

         <a href="#">Link-2</a>

         <a href="#">Link-3</a>            

       </div>

  </div> 

先来看结果：

Step.2

给以上html添加样式，默认看到的只是每组的header，每组中的内容link默认隐藏。

.menu_list {    

    width: 150px;

}

.menu_head {

    padding: 5px 10px;

    cursor: pointer;

    position: relative;

    margin:1px;

    font-weight:bold;

    background: #eef4d3 url(left.png) center right no-repeat;

}

.menu_body {

    display:none;

}

.menu_body a{

  display:block;

  color:#006699;

  background-color:#EFEFEF;

  padding-left:10px;

  font-weight:bold;

  text-decoration:none;

}

.menu_body a:hover{

  color: #000000;

  text-decoration:underline;

  }

Step.3

基于jquery库，编写js使列表动起来

需求应当是，当我们点击header的时候，她底下的body应当显示出来，并且其他菜单组关闭。

$("#firstpane p.menu_head").click(function()

    {

        $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

           $(this).siblings().css({backgroundImage:"url(left.png)"});

    });

至此，手风琴效果的菜单完成！