首页 文章

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

提问于
浏览 次
1

我有一个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
de 40 GB
    </div>
    <div class="numbersInfo">
      <div class="number">40 GB</div>
      <div class="text">para
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

2 回答

  • 0

    嵌套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>
    回复于
  • -2

    使用“ .hide() ”，如果想要一个不同（但相等）的方式，将 attribute “可见”隐藏起来 .

    回复于

相关问题