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

Question

嘿伙计们，我怎样才能关闭一个用 show() 打开的 div。例如：我有一个 "div a"，其中包括一个 "div b"，它最初是隐藏的，当我单击 "div a" 时，"div b" (children) 应该会出现。当我点击 "div b" 中的 [x] 时，这个 div 应该关闭。

在我的最小示例中，我已经找到了如何打开右 div，即 parent div 的 children。但是我怎样才能再次关闭 parent 呢？在我的示例中，我只能关闭 "hide Button" 而不能关闭整个 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

3 件事要提

使用on('click'..功能会让你的生活更轻松
两次点击都是点击，所以没有理由将一个放在另一个里面
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>

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

How to open and close the same div in JQuery

jquery

children

parent

show-hide