Question

我的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 - Close all except this

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

我希望像上面的例子一样有效，就像手风琴一样。但是，当我点击＆lt; .flyout_hover＆gt;只有＆lt; .flyout＆gt;在最后一个＆lt; .flyout_hover＆gt;里面显示，无论什么＆lt; .flyout_hover＆gt;我点击了。

我想这与索引有关，但我很难找到解决方案。

祝你好运

Vegar

Answer 1

$(".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/

另外，也许你想为.flyout_hover元素使用div而不是span？

编辑2：如果你的父母只有一个.flyout div，你不需要索引然后就可以使用它：

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

http://jsfiddle.net/e72hk/

编辑3：当您在编辑的HTML代码中将它们包装在div中时，您可以这样做：

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

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

Answer 2

你的html代码假设看起来像这样。演示here

<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;
}

Jquery手风琴效果

2 个答案: