jquery切换关闭其他打开的div答案

【问题标题】：jquery toggle close other opened divsjquery切换关闭其他打开的div
【发布时间】：2012-03-29 11:26:08
【问题描述】：

我在使用切换时遇到问题，我需要关闭已打开的其他 div，因此只有您单击的 div 一次打开，但仍会切换。

<script type="text/javascript">
    $(function () {
        $(".flyout").hide();
        $(".flyout").siblings("span").click(function () {
            $(this).siblings(".flyout").toggle(500);
        });
    });
</script>  

<ul>
<li ><span id="europe"></span>Europe
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>

<li ><span id="europe"></span>Asia
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>

关于我可以添加什么来获得点击功能以关闭所有其他 div class="flyout" 的任何想法，除了它打开的那个吗？

查看http://www.footballadvisor.net/map/ 以查看问题

谢谢

【问题讨论】：

标签： javascript jquery toggle

【解决方案1】：

请检查：

http://jsfiddle.net/MbTRD/1/

$(function () {
    $(".flyout").hide();
    $(".flyout").siblings("span").click(function () {
        $(this).siblings(".flyout").toggle(500);
    });
});

【讨论】：

这真的很酷，虽然它是我的确切标记，但不能解决问题？
是的，你的正确标记是
- 欧洲
  
  item 1
- 亚洲
  
  项目1
我把它放了，这样你就可以看到它工作 www.footballadvisor.net/map 基本上如果我点击箭头来显示 div，我需要它来关闭所有其他打开的 div class="flyout "
太接近了，唯一的问题是当您单击链接关闭切换时，它会关闭它然后再次打开它:(感谢您花时间在这方面:)

【解决方案2】：

如果你想捕捉点击事件，国家的名字应该在范围内。以下将关闭除您单击的元素之外的所有内容：

 <script type="text/javascript">
     $(function () {
         $(".flyout").hide();
         $(".flyout").siblings("span").click(function () {
             $(".flyout").hide();
             $(this).siblings(".flyout").toggle(500);
         });
     });
</script>  

<ul>
<li ><span id="europe">Europe</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>

<li ><span id="europe">Asia</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>

【讨论】：

我把它放了，所以你可以看到它在工作footballadvisor.net/map 基本上如果我点击一个箭头来显示 div，我需要它来关闭所有其他打开的 div class="flyout"
在我的回复中尝试一下sn-p。
谢谢，我之前试过这个，它只是关闭并重新打开切换时的 div :(

【解决方案3】：

检查这个http://jsfiddle.net/MbTRD/5/我希望这对你有帮助

【讨论】：

【解决方案4】：

这里对您的 jQuery 进行了改进：Fiddle

    $(function () {
        $(".flyout").siblings("span").click(function () {
            $(".flyout").slideUp(200, function() {
                $(this).siblings(".flyout").toggle(500);
            });
            $(this).siblings(".flyout").toggle(500);
        });
    });

【讨论】：