Question

我可以知道这是什么样的下拉面板 Link

它位于Optimum Home PC列表中。当您单击一个项目时，它将下拉其他内容

我想这样做，但我不知道它叫什么，所以我可以搜索教程......

感谢高级

Answer 1

这是一个定制的但简单的概念。有一个div作为＆＃34;标题＆＃34;和一个细节的subsecuent。使用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

你可以尝试使用你可以在jquery.com找到的MNMENU JQUERY DROPDOWN MENU PLUGIN，或者你可以使用纯css来生成那种下拉

下拉面板的名称

2 个答案: