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

在这种情况下，您只需切换单击元素的下一个兄弟

即可

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

尝试此操作并删除所有ID

$('div.open').on( "click", function(e) {
  $(this).next().show()
}
$('buttonhide').on( "click", function(e) {
  $('.details').next().show()
}

Answer 3

这是一个观点：

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

  $('div.open').on( "click", function(e) {

      var id = $(this).next().attr('id');
      $("#"+id).slideToggle()
  });

隐藏/关闭（下一个）div点击，但有可能显示多个div

3 个答案: