Jquery аккордеонный эффект - PullRequest
Новая
       3

Jquery аккордеонный эффект

0 голосов
/ 02 апреля 2012

У меня проблема с функцией jquery. Мой HTML выглядит следующим образом, у меня есть несколько элементов, как показано ниже. 

<div id="design">
 <span class="flyout_hover">click me
  <div class="flyout">
   show me 1
  </div>
 </span>
</div>

<div id="seo">
 <span class="flyout_hover">click me
  <div class="flyout">
   show me 2
  </div>
 </span>
</div>

<div id="mobil">
 <span class="flyout_hover">click me
  <div class="flyout">
   show me 3
  </div>
 </span>
</div>

РЕДАКТИРОВАТЬ: я добавил новый div вокруг каждого элемента.

Тогда я использовал этот код jquery, который нашел здесь: jQuery toggle - Закрыть все, кроме этого 

$(".flyout_hover").click(function() {
   var index = $(this).index();
    $('.flyout').eq(index).toggle().siblings('.flyout').hide();
});

Я хочу иметь тот же эффект, что и в примере выше, как аккордеон. Но когда я нажимаю <.flyout_hover>, отображается только <.flyout> внутри последнего <.flyout_hover>, независимо от того, что <.flyout_hover> я нажимаю.

Я думаю, это как-то связано с индексом, но мне трудно найти решение.

С наилучшими пожеланиями

Vegar

Ответы [ 2 ]

1 голос
/ 02 апреля 2012 
$(".flyout_hover").click(function() {
   var index = $(this).index();
   $('.flyout').eq(index).toggle();
   $(this).siblings().children('.flyout').hide();
});

РЕДАКТИРОВАТЬ: Это потому, что .flyout не имеет братьев и сестер внутри содержащего элемента .flyout_hover. Вы должны найти братьев и сестер .flyout_hover, а затем спрятать их детей.

Скрипка здесь: http://jsfiddle.net/3GXk6/5/

Также, может быть, вы хотите использовать div вместо span для элементов .flyout_hover?

РЕДАКТИРОВАТЬ 2: Если у вас всегда есть только один .flyout div внутри его родителя, вам не нужен индекс, и вы можете просто использовать это: 

$(".flyout_hover").click(function() {
   $('.flyout', this).toggle();
   $(this).siblings().children('.flyout').hide();
});

http://jsfiddle.net/e72hk/

РЕДАКТИРОВАТЬ 3: Когда вы заключаете их в div, как в отредактированном HTML-коде, вы можете просто сделать это вместо этого: 

$(".flyout_hover").click(function() {
    $('.flyout', this).toggle();
    $(this).parent('div').siblings('div').find('.flyout').hide();    
});

http://jsfiddle.net/e72hk/15/

0 голосов
/ 02 апреля 2012

Ваш HTML-код должен выглядеть следующим образом.Демоверсия здесь 

<div class="flyout_hover">Div first </div>
<div class="flyout_hover">Div second</div>
<div class="flyout">Menu1 </div>
<div class="flyout">Menu2 </div>

.container {
    display: none;
}
...