2014-09-21 2 views
0

Могу ли я узнать, что это за панель?
LinkНазвание выпадающей панели

Он находится на Optimum Home PC List. При нажатии кнопки один элемента, он упадет другое Содержание

Я хочу, чтобы это сделать, но я не знаю, что это называется, так что я могу найти учебник ...

Спасибо Расширенного

ответ

1

это заказ, но простая концепция. У вас есть 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; 
} 
+0

ничего себе .. Это потрясающе ... спасибо бро ..! – Anonymous

0

U можно попробовать использовать MNMENU JQuery Выпадающее меню Plugin, который вы можете найти в jquery.com или вы можете использовать чистый CSS для создания, что этот вид ниспадающего

Смежные вопросы