如何通过单击它的子按钮来隐藏 div答案

【问题标题】：How to hide a div by clicking on it's child button如何通过单击它的子按钮来隐藏 div
【发布时间】：2017-10-27 13:40:13
【问题描述】：

我有一个 div，我想通过单击其中的按钮来隐藏它。我设法通过使用 .show() 和 .addClass() 让它出现，但相反 - .hide() 和 .removeClass() - 它不起作用！

我想显示具有distributeModalContent 和distributeModal 类的div，。然后通过单击带有#okButton 的按钮将它们隐藏起来。

使用 .parent() 有效，但它也隐藏了distributeRow div，这是不应该发生的。

请参阅下面我的 HTML、jQuery 和屏幕图像。

$(document).ready(function() {
  $(".numbersInfo").click(function() {
    $(".numbersInfo").addClass("active");
    $(".distributeModal").show();
  });
  $("#okBtn").click(function() {
    $(".numbersInfo").removeClass("active");
    $(".distributeModal").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row cingapura newRow noTopBottom">
  <div class="wideContent distributeRow">
    <div class="textInfo">
      Franquia total<br/>de 40 GB
    </div>
    <div class="numbersInfo">
      <div class="number">40 GB</div>
      <div class="text">para<br/>distribuir</div>
      <div class="distributeModalContent">
        <h1>A franquia de internet já está distribuída por completo</h1>
        <p>Se quiser aumentar a internet de alguém, é necessário diminuir a de outra pessoa.</p>
        <button id="okBtn">Ok, entendi</button>
      </div>
    </div>
  </div>
  <div class="distributeModal"></div>
</div>

CSS 太大而无法发布，但基本上活动类显示会阻止 DistributeModalContent div 并将其他样式添加到 numbersInfo div。

显示和隐藏 div 前后的屏幕

显示 div 的屏幕之一

【问题讨论】：

标签： jquery html css

【解决方案1】：

在嵌套的 DOM 元素上有两个点击事件——当用户点击按钮时，它的事件触发，隐藏模式，但随后事件冒泡到父 .numbersInfo 元素，它的事件也触发，再次显示模态。

您可以通过从包含元素的事件中返回 false 来防止这种情况发生：

$(document).ready(function() {
  $(".numbersInfo").click(function() {
    $(".numbersInfo").addClass("active");
    $(".distributeModal").show();
  });
  $("#okBtn").click(function() {
    $(".numbersInfo").removeClass("active");
    $(".distributeModal").hide();
    return false; // prevent the click event bubbling up to .numbersInfo
  });
});

.numbersInfo {cursor:pointer;}
.distributeModal {display:none}
.active {background-color:#FFC}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row cingapura newRow noTopBottom">
    <div class="numbersInfo">
        <h1>A franquia de internet já está distribuída por completo</h1>
        <p>Se quiser aumentar a internet de alguém, é necessário diminuir a de outra pessoa.</p>
        <button id="okBtn">Ok, entendi</button>
      </div>
    </div>
  </div>
  <div class="distributeModal">MODAL CONTENTS</div>
</div>

【讨论】：