隐藏其他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(); 
});