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

Question

我有一个div，我想通过点击里面的按钮来隐藏它。我设法通过使用.show（）和.addClass（）来实现它，但相反的是 - .hide（）和.removeClass（） - 它不起作用！

我想用distributeModalContent和distributeModal类来显示div。然后单击#okButton按钮将其隐藏起来。

使用.parent（）有效，但它也隐藏了distributeRow div，这不应该发生。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

显示和隐藏div之前和之后的屏幕

显示div的屏幕

Answer 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>

Answer 2

使用“ .hide（） ”，如果想要一种不同（但相等）的方式，则属性“可见< / em>“到隐藏。