2012-03-22 4 views
0

Все, У меня есть следующий код, чтобы открыть некоторые дивы, которые действуют как Переключает:Закрыть Переключить Другое открытым Divs

$(".tb-toggle").each(function(){ 
    $(this).find(".box").hide(); 
}); 

$(".tb-toggle").each(function(){ 
    $(this).find(".trigger").click(function() { 
      $(this).toggleClass("active").next().stop(true, true).slideToggle("slow"); 
      return false; 
    }); 
}); 

Вот мой HTML для отображения Toggles:

<div class="tb-toggle toggle-fancy"><a href="#" class="trigger"><span>+</span>Toggle Accordion</a><div class="box">This is fancy toggle accordion</div><!-- .box (end) --></div> 
<div class="tb-toggle toggle-fancy"><a href="#" class="trigger"><span>+</span>Toggle Accordion 2</a><div class="box">This is fancy toggle accordion 2</div><!-- .box (end) --></div> 
<div class="tb-toggle toggle-fancy"><a href="#" class="trigger"><span>+</span>Toggle Accordion 3</a><div class="box">This is fancy toggle accordion 3</div><!-- .box (end) --></div> 

Это прекрасно работает и открывает мой Toggle fine. Однако, когда это произойдет, я хотел бы закрыть другие открытые Toggles.

Я нашел это на JQuery http://jqueryui.com/demos/accordion/ поэтому я попытался настроить свой код к этому:

$(".tb-toggle").each(function(){ 
    $(this).find(".trigger").click(function() { 
      $(this).toggleClass("active").next().stop(true, true).slideToggle("slow"); 
      return false; 
    }); 
}).next().hide(); 

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

Я также попробовал этот кусок кода:

$(".tb-toggle").each(function(){ 
    $(this).find(".trigger").click(function() { 
      $(this).toggleClass("active").next().stop(true, true).slideToggle("slow"); 
      return false; 
    }); 
}).next().toggleClass("active"); 

Может кто-нибудь мне точку в правильном направлении?

Вот обновленный JSFiddle: http://jsfiddle.net/HHtBX/

Спасибо!

ответ

1

FIXED :) Обновление после jsfiddle для конкретного случая рабочей демо: http://jsfiddle.net/HHtBX/2/

JQuery кодекса

$(".tb-toggle").each(function(){ 
    $(this).find(".box").hide(); 
}); 

$(".tb-toggle").each(function(){ 
    $(this).find(".trigger").click(function() { 
     $('.tb-toggle a').removeClass('active').next().slideUp('slow'); 
     $(this).toggleClass("active").next().stop(true, true).slideToggle("slow"); 
     //return false; 
    }); 
}); 

Предыдущая версия, когда нет Jsfiddle не существует при условии

Хийя Это может помочь вам: http://jsfiddle.net/tovic/CzE3q/

Работа демо: (немного более структурированный) http://jsfiddle.net/CzE3q/21/ - Так как у вас нет jsfiddle я буду считать ваш HTML отлично и попробовать этот

Надеется, что это помогает, ура!

+0

Спасибо, я это не сработал для меня, но я добавил JS Fiddle, чтобы вы могли посмотреть на – user1048676

+0

Saweet, взглянув сейчас, приветствия! ~ –

+0

@ user1048676 - FIXED теперь отправляет вам ссылку прямо сейчас! –

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