隱藏其他Divs當點擊新的Div與相同的類

Question

我無法弄清楚如何添加關閉其他divs的功能時，當我點擊一個div新div與相同的類。我知道它應該很簡單，但不能讓它工作。這裏是小提琴 - http://jsfiddle.net/dnym5p1s/

added correct link 

<div class="option-heading"> 
      <div class="arrow-up">&#9650;</div> 
      <div class="arrow-down">&#9660;</div> 
      <h1>Year1</h1> 
     </div> 
     <div class="option-content"> 
      Content 
     </div> 
     <div class="option-heading"> 
      <div class="arrow-up">&#9650;</div> 
      <div class="arrow-down">&#9660;</div> 
      <h1>Year2</h1> 
     </div> 
     <div class="option-content"> 
      Content 
     </div> 
$(".option-content").hide(); $(".arrow-up").hide(); 
     $(".option-heading").click(function(){ 
       $(this).next(".option-content").slideToggle(150); 
       $(this).find(".arrow-up, .arrow-down").toggle(); 
     }); 

Answer 1

這將做到這一點：

$(".option-content,.arrow-up").hide(); 
$(".option-heading").click(function() { 
    $(".option-content").not($(this).next()).slideUp(250); 
    $(".option-heading").not(this).find("div.arrow-up").hide(); 
    $(".option-heading").not(this).find("div.arrow-down").show(); 
    $(this).next(".option-content").slideToggle(250); 
    $(this).find(".arrow-up, .arrow-down").toggle(); 
}); 

jsFiddle example

Answer 2

剛上點擊監聽器的頂部添加$(".option-content").hide();像這樣：

$(".option-heading").click(function(){ 
    $(".option-content").hide(); 
    $(this).next(".option-content").slideToggle(150); 
    $(this).find(".arrow-up, .arrow-down").toggle(); 
});