это заказ, но простая концепция. У вас есть div с «заголовком» и подписчиком с подробностями. Используйте 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;
}
ничего себе .. Это потрясающе ... спасибо бро ..! – Anonymous