2012-03-29 104 views
0

我有使用肘,我需要關閉所有已經打開的其他div的問題,所以只有您點擊DIV是開放的一次,但仍切換。jQuery的切換關閉其他打開的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/看問題

感謝

回答

2

檢查,請:

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

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

+0

這就是真的很酷,其確切的標記雖然如此不解決問題? – user989952 2012-03-29 11:39:57

+0

是您正確的標記是

  • 歐洲
    • item 1
  • 亞洲
    • item 1
Kamal 2012-03-29 11:42:24

+0

伊夫把這個了這麼你可以看到它基本上工作www.footballadvisor.net/map,如果我上的箭頭點擊顯示在div,我需要它來關閉其他所有打開的div類=「彈出」 – user989952 2012-03-29 11:44:56

1

國家的名稱應如果你想要t就在跨度範圍內o捕捉點擊事件。 除了元素緊隨一切你點擊:

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

伊夫把這個了,所以你可以看到它的工作HTTP ://www.footballadvisor.net/map/ 基本上,如果我上的箭頭點擊顯示在div,我需要它來關閉其他所有打開的div類=「彈出」 – user989952 2012-03-29 11:43:27

+0

給一個嘗試在我的迴應的片段。 – 2012-03-29 12:30:46

+0

,謝謝,我已經試過這一個之前,它只是關閉並重新打開在切換div :( – user989952 2012-03-29 12:41:58

0

這裏的改進,您的jQuery:Fiddle

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