如何在JQuery中打开和关闭相同的div

Question

嘿伙计们，我怎么能关闭一个用show（）打开的div。 例如： 我有一个“div a”，其中包含一个“div b”，它首先被隐藏，当我点击“div a”时，“div b”（孩子们）应该出现。当我点击“div b”内的[x]时，这个div应该关闭。

在我最小的例子中，我已经找到了如何打开正确的div，它是父div的子节点。但是我怎样才能再次关闭父母？在我的例子中，我只能关闭“隐藏按钮”而不是整个div“Tag-Cloud”。我还试图实现parent（）函数和parentUntil（）函数，但它失败了。

你们能帮助我吗？

$(document).ready(function() {

  $(".film").click(function() {
    $(this).children(".tag-cloud").show(function() {
      $(".fa-close").click(function() {
        $(this).parent().hide();
      });
    });
  });

});

.tag-cloud {
  display: none;
}

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

  <h4 class="film-title">Open the div here</h4>

  <div class="tag-cloud">
    <!-- tag-cloud -->
    <i class="fa fa-2x fa-close"></i>
    <ul>
      <li><a href="">tag1</a></li>
      <li><a href="">tag2</a></li>
    </ul>
    <div class="exit-tags">
      <i class="fa fa-2x fa-close">[Close Button]</i>
      <!-- The close button for the tag-cloud -->
    </div>
  </div>

</div>

Answer 1

要提的三件事

1. 使用on('click'..功能，让您的生活更轻松
2. 这两次点击都只是点击，因此没有理由将其中一个放在另一个
中
3. event.stopPropagation()是最重要的事情。因为如果你在div中单击以关闭它，你也可以单击div本身。使用停止传播，您可以阻止事件冒充DOM，因为如果不是hide()，那么再次show()。

More about event.stopPropagation() can be found here

$(document).ready(function(){

  $(".film").on('click', function (){
    $(this).children(".tag-cloud").show();
  });

  $(".fa-close").on('click', function (event){
    event.stopPropagation();  // do not forget this
    $(this).closest(".tag-cloud").hide();
  });

});

.tag-cloud {
	display: none;
}

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

  <h4 class="film-title">Open the div here</h4>	

  <div class="tag-cloud"><!-- tag-cloud -->
    <i class="fa fa-2x fa-close"></i>
    <ul>
      <li><a href="">tag1</a></li>
      <li><a href="">tag2</a></li>
    </ul>
    <div class="exit-tags">
      <i class="fa fa-2x fa-close">[Close Button]</i><!-- The close button for the tag-cloud -->
    </div>
  </div>

</div>

Answer 2

检查以下代码。据我了解，您希望在点击关闭时关闭.tag-cloud。

$(document).ready(function() {

  $(".film h4.film-title").click(function() {
    $(this).parent().children(".tag-cloud").show();
  });

  $(".fa-close").on('click', function() {
    $(this).parents(".tag-cloud:first").hide();
  });

});

.tag-cloud {
  display: none;
}

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

  <h4 class="film-title">Open the div here</h4>

  <div class="tag-cloud">
    <!-- tag-cloud -->
    <i class="fa fa-2x fa-close"></i>
    <ul>
      <li><a href="">tag1</a></li>
      <li><a href="">tag2</a></li>
    </ul>
    <div class="exit-tags">
      <i class="fa fa-2x fa-close">[Close Button]</i>
      <!-- The close button for the tag-cloud -->
    </div>
  </div>

</div>

Answer 3

只需在$（＆＃34; .film-title＆＃34;）上显示div $（＆＃34; .tag-cloud＆＃34;）。点击并隐藏$（＆＃34; .fa-关闭＆＃34;）。点击

＆＃13;

＆＃13;

$(document).ready(function() {

  $(".film-title").click(function() {
    $(".tag-cloud").show();
  });

  $(".fa-close").click(function() {
    $(".tag-cloud").hide();
  });

});

＆＃13;

.tag-cloud {
  display: none;
}

＆＃13;

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

  <h4 class="film-title">Open the div here</h4>

  <div class="tag-cloud">
    <!-- tag-cloud -->
    <i class="fa fa-2x fa-close"></i>
    <ul>
      <li><a href="">tag1</a></li>
      <li><a href="">tag2</a></li>
    </ul>
    <div class="exit-tags">
      <i class="fa fa-2x fa-close">[Close Button]</i>
      <!-- The close button for the tag-cloud -->
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;