JQuery переключить закрыть другие открытые div

Question

У меня проблема с использованием переключателя, когда мне нужно закрыть другие уже открытые 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>

Любые идеи о том, что я могу добавить, чтобы заставить функцию click закрывать все остальные div-классы = "flyout", кроме включенного?

посмотрите на http://www.footballadvisor.net/map/, чтобы увидеть проблему

спасибо

Answer 1

Проверьте это, пожалуйста:

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

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

1008 *

Answer 2

отметьте это http://jsfiddle.net/MbTRD/5/ Я надеюсь, это поможет вам

Answer 3

Название страны должно быть внутри промежутка, если вы хотите перехватить событие клика. Следующее закройте все, кроме элемента, на который вы нажали:

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

Answer 4

Вот улучшение вашего jQuery: Fiddle

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