jQuery手風琴製做

jQuery手風琴製做

• 提及手風琴，想必你們應該都知道吧，簡單的來講就是能夠來回收縮的這麼一個東西，接下來，我就給你們演示一下用jQuery製做一個手風琴菜單！

---

1. 寫jQuery前，咱們須要引用一個jQuery庫，通常來說，用jQuery-1.8.3就能夠了，我這裏有個連接，你們複製上，而後在瀏覽器中打開，下載1.8.3版本的就能夠了：http://www.jq22.com/jquery-in...。

2. 接下來咱們就開始製做了，首先，咱們要作的就是排版，代碼以下:

   <div id="dahezi">
           <div>
               <p>工做</p>
               <div class="div1">
                   <img src="img/1.jpg"/>
               </div>
           </div>
           <div>
               <p>汽車</p>
               <div class="div1">
                   <img src="img/2.jpg"/>
               </div>
           </div>
           <div>
               <p>房子</p>
               <div class="div1">
                   <img src="img/3.jpg"/>
               </div>
           </div>
           <div>
               <p>美女</p>
               <div class="div1">
                   <img src="img/4.jpg"/>
               </div>
           </div>
       </div>

3. 而後就是寫css樣式：

   <style>
           p{
               margin:0;
               padding:0;
           }
           #dahezi{
               width:300px;
               background:red;
               margin:0 auto;
               text-align:center;
           }
           #dahezi>div>p{
               background:pink;
               border-bottom:1px solid black;
               color:red;
               height:50px;
               line-height:50px;
           }
           #dahezi>div>div{
               display:none;
               height:150px;
           }
           .div1 img{
               width:100%;
               height:100%;
           }
       </style>

4. 最後，就該咱們的重點了，jQuery：

   <script type="text/javascript">
               $("#dahezi>div>p").click(function(){
                   $(this).nextAll().
                   slideDown().end().
                   parent().siblings().
                   children("div").hide();
               });
       </script>
     註釋：nextAll()，查找當前元素以後全部的同輩元素。
   
   slideDown()，經過高度變化（向下增大）來動態地顯示全部匹配的元素。
   
   end()，將匹配的元素列表變爲前一次的狀態。
   
   parent()，取得一個包含着全部匹配元素的惟一父元素的元素集合。
   
   siblings()，取得一個包含匹配的元素集合中每個元素的全部惟一同輩元素的元素集合。能夠用可選的表達式進行篩選。
   
   children("")，取得一個包含匹配的元素集合中每個元素的全部子元素的元素集合。
   
   hide()，隱藏顯示的元素。

1. 完成了這幾步以後，咱們的手風琴菜單就出來了，來看一下咱們的效果吧！