Jquery折叠效果
我有一个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();
}); 我想要有和上面例子一样的效果，就像手风琴一样。但是当我点击<.flyout_hover>时，无论我点击什么<.flyout>，只会显示最后一个<.flyout_hover>中的<.flyout_hover>。
我猜这与索引有关，但我很难找到解决方案。
诚挚的问候
织女星
回答 2
Stack Overflow用户
发布于 2012-04-02 18:20:17
$(".flyout_hover").click(function() {
var index = $(this).index();
$('.flyout').eq(index).toggle();
$(this).siblings().children('.flyout').hide();
});编辑:这是因为包含.flyout_hover元素的.flyout中没有兄弟元素。你必须找到.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:当您将它们包装在div中时，就像在您编辑的HTML代码中一样，您可以这样做：
$(".flyout_hover").click(function() {
$('.flyout', this).toggle();
$(this).parent('div').siblings('div').find('.flyout').hide();
});http://jsfiddle.net/e72hk/15/
Stack Overflow用户
发布于 2012-04-02 09:03:04
你的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;
}https://stackoverflow.com/questions/9969740
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号