点击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-->
请帮帮我
答案 0 :(得分:3)
在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();
});
});
答案 1 :(得分:0)
正如您在评论中看到的那样,您的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>