javascript - 单击时隐藏/关闭(下一个)div，但有可能显示多个 div

Question

我有一些联系人框，其中包含一些详细联系信息，但我不想在点击时显示/隐藏这些详细信息。我得到了这个工作正常，但我需要一点补充。我需要保持所有 div 处于打开状态，直到我单击相应的按钮。

所以如果有人点击按钮 1，div 1 应该是可见的。如果有人点击按钮 2，div 1 和 div 2 是可见的。如果有人点击了一个 div 已经可见的按钮，这个 div 应该再次关闭。

这是我的代码:

  $("div.details").each(function(){
       $(this).hide();
  });

  $('div.open').on( "click", function(e) {
      e.preventDefault();
      var id = $(this).next().attr('id');
      $("div.details").each(function(){
          $(this).hide();
          if($(this).attr('id') == id) {
            $(this).show();
          }
      });
  });

div.contact {
  background-color: #ccc;
}

div.open {
  cursor: pointer;
  border: 1px solid black;
}
div.open:hover {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div id="contactBoxes">
	<div class="contact">
	  <h3>Contact Name 1</h3>
	  <div class="open"><span>Contact Me</span></div>
      <div class="details" id="1"><p>Contact Details</p></div>
    </div>
	<div class="contact">
	  <h3>Contact Name 2</h3>
	  <div class="open"><span>Contact Me</span></div>
      <div class="details" id="2"><p>Contact Details</p></div>
    </div>
	<div class="contact">
	  <h3>Contact Name 3</h3>
	  <div class="open"><span>Contact Me</span></div>
      <div class="details" id="3"><p>Contact Details</p></div>
    </div>
  </div>

我使用 ID'S 只是为了找到关联的 div。如果有人有没有 ID 的解决方案，我会更喜欢这个解决方案。 :)

我希望有人能给我提示，如何解决这个问题。

谢谢!

Answer 1

在这种情况下，您可以切换被点击元素的下一个兄弟元素

$('div.open').on("click", function(e) {
  e.preventDefault();
  //toggle the next element
  $(this).next().toggle()
});

div.contact {
  background-color: #ccc;
}
div.open {
  cursor: pointer;
  border: 1px solid black;
}
div.open:hover {
  color: blue;
}
/*hide details at the start*/

div.details {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contactBoxes">
    <div class="contact">
        <h3>Contact Name 1</h3>
        <div class="open"><span>Contact Me</span></div>
        <div class="details" id="1"><p>Contact Details</p></div>
    </div>
    <div class="contact">
        <h3>Contact Name 2</h3>
        <div class="open"><span>Contact Me</span></div>
        <div class="details" id="2"><p>Contact Details</p></div>
    </div>
    <div class="contact">
        <h3>Contact Name 3</h3>
        <div class="open"><span>Contact Me</span></div>
        <div class="details" id="3"><p>Contact Details</p></div>
    </div>
</div>