下拉麪板的名稱

Question

我可以知道這是什麼樣的下拉麪板。
Link

它位於Optimum Home PC列表中。當你點擊一個項目，它會下拉其他內容

我想這樣做，但我不知道它叫什麼，這樣我就可以搜索教程...

在先進的感謝

Answer 1

它是由一個自定義的，但一個簡單的概念。有一個div作爲「標題」和subcuent與細節。使用jQuery檢測事件並查找div以顯示細節。我在此簡單example爲了簡化概念：

的jQuery：

$(document).ready(function(){ 
$(".toggle div:not('.noaction')").click(function(){ 
    $(this).parent().next().slideToggle(); 
}); 

$(".anoterAction").click(function(event){ 
    event.preventDefault(); 
    $parent=$("#"+$(this).attr('data-parent')); 
    $parent.addClass('dontOpen'); 
    alert("another action!"); 


}); 

}）;

HTML

<div class="toggle" id="1"> 
<div>Just one row</div> 
<div>Just another one row</div> 
<div class="noaction"><a class="anoterAction" data-parent="1" href="">Maybe a link that make another action!</a></div> 
</div> 
<div class="details"> 
<p>You can put all details here</p> 
</div> 
<div class="toggle" id="2"> 
<div>Just one row</div> 
<div>Just another one row</div> 
<div><a class="anoterAction" href="">Maybe a link that make another action!</a></div> 
</div> 
<div class="details"> 
<p>Other detail for other row</p> 
</div> 

CSS

.details 
{ 
    display:none; 
    border:1px solid #444; 
    background: #e1e1e1; 
    border-top:none; 
    padding:20px; 
} 

.toggle 
{ 
    display:block; 
    border:1px solid #ccc; 
    background: #eee; 
    margin-top: 10px; 
    padding:10px; 
} 

.toggle div 
{ 
    display:inline-block; 
} 

Answer 2

U可以嘗試使用MNMENU JQUERY下拉菜單插件，你可以找到在jquery.com或者您可以使用純CSS生成那種降下來