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

Question

嘿，伙计们，我怎么能关闭一个div，这是开放的显示()。例如:我有一个"div“，其中包括一个"div”，它最初是隐藏的，当我单击"div“时，应该会出现"div”(子)。当我点击"div“中的x时，这个div应该关闭。

在我的最小示例中，我已经了解了如何打开正确的div，即父div的子程序。但我怎样才能再次关闭父母呢？在我的示例中，我只能关闭“隐藏按钮”，而不能关闭整个div“标记云”。我还试图实现父()函数和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()。

有关event.stopPropagation()的更多信息可以在这里找到

​

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

只需在$(“.”).click上显示div $(“..tag cloud”)，并在$(“..fa close”).click上隐藏

​

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

​