javascript - 使打开 1 div 关闭 JS/JQuery 中同一类的所有其他 div(不包括自身)？

Question

我正在尝试为一组动画信息框编写 JQuery。单击标题 div.info-box__title 应打开相邻的 div.info-box__content 并同时关闭任何其他打开的 div.info-box__content

更新 - 应该已经指定，我还需要在用户点击任何 .info-box 之外时关闭所有框。

更新 2 - fiddle 在这里:https://jsfiddle.net/q9orfsoy/

标记是这样的:

 <section id="info-box-3" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>

我一直在为 JS 的执行顺序问题而苦恼。到目前为止，我有两个功能:

开幕式:

$('.info-box__title').bind("click touchstart", function() {

    // close the others and open this one
    if($(this).next('.info-box__content').css('display') == 'none') {
        $(this).next('.info-box__content').slideDown();
        $(this).parents('.info-box').addClass('open');
        $(this).parents('.info-box.open').siblings().children('.info-box__title').hide();
    }
});

结束语:

// hide all when click anywhere else in the document
$(document).bind("click touchstart", function(event) {

    // exclude the one that's currently open
    if(!$(event.target).closest('.info-box.open').length){
        $('.info-box__content').slideUp(function(){
            $(this).parents('.info-box').removeClass('open');
        });
    }
});

此代码的作用是在您单击外部时关闭所有 info-box__content div。但是，如果您单击另一个信息框__title，它也会打开它，而不会关闭其余部分。

(最初我认为在打开的类中添加一类 .open 就足够了，但我想我遇到了执行顺序问题？)

处理此类问题的最佳/推荐方法是什么？

Answer 1

尝试使用 .index() , jsfiddle https://jsfiddle.net/q9orfsoy/1/

var titles = $(".info-box__title");
var content = $(".info-box__content");

titles.on("click touchstart", function(e) {
   if ($(this).next(".info-box__content")
       .is(":visible")) {
      $(this).next(".info-box__content")
      .slideUp()
   } else {
  content.slideUp()
  .eq($(this).index(".info-box__title"))
  .slideDown()  
   }
});
// ALL boxes to close when user clicks outside any `.info-box`
$(document).on("click touchstart", function(e) {
  if ($(e.target).is(".info-box, .info-box *")) {
    return
  }
  else {
    content.slideUp()
  }
})

.info-box__content {
display: none;
}

.info-box {
border: 1px solid black;
padding; 20px;
margin:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
 <section id="info-box-1" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title 1</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>
 <section id="info-box-2" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title 2</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>
 <section id="info-box-3" class="info-box">
     <div class="centerer">
         <div class="info-box__close"></div>
         <div class="info-box__title">
             <h1>Title 3</h1>
         </div>
         <div class="info-box__content">
             <p>content</p>
         </div>
    </div>
</section>