我怎样才能打开一个div而不是全部

Question

我怎样才能打开一个div而不是全部，因为当我点击div所有div打开...但我只需要点击一个。

＆＃13;

＆＃13;

$(document).ready(function(){
    $(".more").click(function(){
         $(".more-open").toggle();
       });
});

$(document).ready(function(){
    $(".close-button").click(function(){
        $(".more-open").toggle();
       });
});


And this script: 

＆＃13;

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


<div id="box2">
<a href="#show"><div class="more">click</div></a>

<div class="more-open" style="display: none;">
  Test
	<a href="#close"><div class="close-button"><br></div></a>

</div>

</div>



<div id="box2">
<a href="#show"><div class="more">click</div></a>

<div class="more-open" style="display: none;">
  Test
	<a href="#close"><div class="close-button"><br></div></a>

</div>


</div>

＆＃13;

＆＃13;

＆＃13;

任何人？谢谢！

Answer 1

您需要找到要关闭/打开的相关元素。

在您的情况下，more按钮应该切换单击按钮的父级的下一个兄弟元素，在关闭按钮的情况下，您需要关闭祖先more-open元素

$(document).ready(function() {
  $(".more").click(function() {
    $(this).parent().next(".more-open").toggle();
  });
});

$(document).ready(function() {
  $(".close-button").click(function() {
    $(this).closest(".more-open").toggle();
  });
});

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


<div id="box2">
  <a href="#show">
    <div class="more">click</div>
  </a>

  <div class="more-open" style="display: none;">
    Test
    <a href="#close">
      <div class="close-button">
        <br>C
      </div>
    </a>

  </div>

</div>



<div id="box2">
  <a href="#show">
    <div class="more">click</div>
  </a>

  <div class="more-open" style="display: none;">
    Test
    <a href="#close">
      <div class="close-button">
        <br>C
      </div>
    </a>

  </div>


</div>