如何在 JQuery 中打开和关闭同一个 div

Question

大家好，我如何关闭使用 show() 打开的 div。 例如： 我有一个“div a”，其中包括一个最初隐藏的“div b”，当我点击“div a”时，“div b”（儿童）应该会出现。当我点击“div b”内的 [x] 时，这个 div 应该关闭。

在我的最小示例中，我已经了解了如何打开正确的 div，它是父 div 的子级。但是我怎样才能再次关闭父级？在我的示例中，我只能关闭“隐藏按钮”，但不能关闭整个 div“标签云”。我也尝试过实现 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

需要提及的 3 件事

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

只需在 $(".film-title") 上显示 div $(".tag-cloud")。单击并在 $(".fa-close") 上隐藏。单击

$(document).ready(function() {

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

  $(".fa-close").click(function() {
    $(".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>