jquery - 下拉面板的名称

Question

请问这是什么下拉面板？
Link

它在最佳家庭 PC 列表中。当你点击一个元素时，它会下拉其他内容

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

Answer 1

这是一个定制的但一个简单的概念。有一个 div 作为“标题”和一个带有详细信息的 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;
}