我有一個(gè)div，我想通過點(diǎn)擊它里面的按鈕來隱藏它。我已經(jīng)設(shè)法使它出現(xiàn)通過使用。顯示()和。addClass()但正好相反。隱藏()和。removeClass() -不起作用！

我想顯示帶有distributeModalContent和distributeModal類的div。然后通過點(diǎn)擊帶有# ok按鈕的按鈕隱藏它們。

使用。parent()工作正常，但它也隱藏了distributeRow div，這是不應(yīng)該發(fā)生的。

請(qǐng)看下面我的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>

在嵌套的DOM元素上有兩個(gè)click事件——當(dāng)用戶單擊按鈕時(shí)，它的事件觸發(fā)，隱藏了模態(tài)，但是隨后該事件上升到父級(jí)。numbersInfo元素，它的事件也會(huì)觸發(fā)，再次顯示模式。

您可以通過從所包含元素的事件中返回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>