下拉面板的名称

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生成那种降下来