Question

点击class=.team-popup时会弹出class=".team-single"的弹出窗口我点击class=.close-btn

后无法关闭弹出窗口

以下是JS和html代码

jQuery(document).ready(function() {

  jQuery(".team-single").click(function() {
    jQuery(".team-popup").show();
  });

  jQuery(".close-btn").click(function() {
    jQuery(".team-popup").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="team-single">
  <div class="team-popup">
    <div class="popup-box">
      <div class="col-sm-8 col-xs-7 right-side">

      </div>
      <span class="close-btn">x close</span>
    </div>
  </div>
</div>
<!-- single team ends-->

请帮帮我

Answer 1

在javascript中所有事件（好吧，差不多）＆＃34; bubble＆＃34;出于父母的要素。

在示例代码中＆＃34;点击＆＃34;活动到达＆＃34; .team-single＆＃34;这种起泡的有限功能原因。

您应该使用事件对象的stopPropagation函数来阻止冒泡。

jQuery(document).ready(function() {

  jQuery(".team-single").click(function(e) {
    jQuery(".team-popup").show();
  });

  jQuery(".close-btn").click(function(e) {
    jQuery(".team-popup").hide();
    e.stopPropagation();
  });
});

Answer 2

正如您在评论中看到的那样，您的html结构应该被修改。这是一个例子

<html>
<body>

<div class="team-single">
    <div class="open-popup">open</div>
    <div class="team-popup" style="display:none">
        <div class="popup-box">
            <div class="col-sm-8 col-xs-7 right-side">
               text inside your popup
            </div>
            <span class="close-btn">x close</span>
        </div>
   </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

jQuery(document).ready(function() {

    jQuery(".open-popup").click(function(){
        jQuery(".team-popup").show();
    });

    jQuery(".close-btn").click(function(){
        jQuery(".team-popup").hide();
    });
});
</script>
</body>
</html>

无法关闭弹出窗口

2 个答案: