創建jQuery手風琴菜單的更好方法？

我一直在嘗試學習Javascript/jQuery，並嘗試通過在this頁面上覆制粘貼代碼來構建手風琴菜單。但是，當我嘗試製作多個div時，只有第一個可以工作。如果我將ID切換到類，那麼當我單擊時，這兩個div都會展開。這是我從W3School獲得的腳本;創建jQuery手風琴菜單的更好方法？

$(document).ready(function(){ 
    $(".flip").click(function(){ 
     $(".panel").slideToggle("slow"); 
    }); 
});

然後在HTML我有

 <div class="flip">Category A</div> 
     <div class="panel"> 
      One <br/> 
      Two <br/> 
      Three <br/> 
      Four <br/> 
     </div> 
     <div class="flip">Category B</div> 
     <div class="panel"> 
      One <br/> 
      Two <br/> 
      Three <br/> 
      Four <br/> 
     </div>

而CSS -

#flip, #panel{ 
    width: 350px; 
    text-align: center; 
    font-family: arial, sans-serif; 
    color: white; 
    font-size: 2em; 
    margin: 0 auto; 
} 

#flip{ 
    height: 40px; 
    padding: 10px 0; 
    background-color: #cc44ff; 
} 

#panel{ 
    display: none; 
    background-color: orange; 
}

我已經成功地得到它的工作，如果我重複的函數和類，並給他們新的名字，但它似乎凌亂和不必要的。有沒有更乾淨的方法來做到這一點？

我就貼到的jsfiddle以及 - http://jsfiddle.net/Nikf/k1wstb5n/

來源

2015-10-18 Uesls

問題是，$(".panel")地址所有匹配元素，而不僅僅是感興趣的。

從點擊的元素this開始，您可以「遍歷DOM」，選擇下一個.panel，忽略其它：

$(".flip").click(function() { 
    $(this).next(".panel").slideToggle("slow"); 
});

DEMO（使用具有適當調整CSS問題的HTML）

來源

2015-10-18 09:07:00

這不是一個好主意，因爲這太依賴於html。 –

@ Roamer-1888爲我工作。感謝堆。 – Uesls

Update Fiddle 的變化ID類：

<body> 
     <div class="sidebar"> 
      <div class="cat"> 
       <div class="flip">Category A</div> 
       <div class="panel"> 
        One <br/> 
        Two <br/> 
        Three <br/> 
        Four <br/> 
       </div> 
      </div> 
      <div class="cat"> 
       <div class="flip">Category B</div> 
       <div class="panel"> 
        One <br/> 
        Two <br/> 
        Three <br/> 
        Four <br/> 
       </div> 
      </div> 
     </div> 
</body>

CSS：

*{ 
    padding: 0; 
    margin: 0; 
} 

html{ 
    height: 100%; 
} 

.sidebar{ 
    width: 320px; 
    height: 100%; 
    background-color: ; 
} 

.flip, .panel{ 
    width: 350px; 
    text-align: center; 
    font-family: arial, sans-serif; 
    color: white; 
    font-size: 2em; 
    margin: 0 auto; 
} 

.flip{ 
    height: 40px; 
    padding: 10px 0; 
    background-color: #cc44ff; 
} 

.panel{ 
    display: none; 
    background-color: orange; 
}

，並通過使用.cat容器的項目只是使用這個jQuery：

$(document).ready(function(){ 
    $(".flip").click(function(){ 
     $(this).siblings('.panel').slideToggle("slow"); 
    }); 
});

來源

2015-10-18 09:05:39

嘿，我給你的代碼一個鏡頭，一旦我添加「貓」類，它運作良好。你能否解釋或提供更多的信息，說明爲什麼增加這個類使它起作用，以及爲什麼更好的練習？ – Uesls

您使用的jQuery代碼無法按預期工作，因爲您的目標是所有'.panel'元素。使用'.cat'等容器會將代碼限制在每個項目的本地容器中，因此您可以像我所展示的那樣對.panel進行代碼控制。你在上面接受的答案是正確的，但不是一般的，也過於依賴於html。 –

創建jQuery手風琴菜單的更好方法？

回答

相關問題