Question

我正在努力关闭一个弹出窗口，这个窗口会在点击时显示，但由于某些原因，它对我来说并不明显。

这是HTML结构：

<div id="buttons">
    <div class="content-wrapper">
        <h2>Some title</h2>
        <div class="red-divider"></div>
        <div class="buttons">
            <div class="btn">
                <div class="popup">Description 1</div>
                <div class="btn1"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 2</div>
                <div class="btn2"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 3</div>
                <div class="btn3"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 4</div>
                <div class="btn4"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 5</div>
                <div class="btn5"></div>
                <p>some text goes here</p>
            </div>
        </div>
    </div>
</div>

一些CSS样式：

.btn {
width: 190px;
display: inline-block;
vertical-align: top;
}

.btn1,.btn2,.btn3,.btn4,.btn5 {
width: 130px;
height: 130px;
border: 1px solid #fff;
border-radius: 100%;
margin: 0 auto;
position: relative;
}

.popup {
display: none;
position: absolute;
left: 50%;
top: 50%;
width: 500px;
margin-left: -250px;
height: 200px;
margin-top: -200px;
padding: 25px 10px 30px 10px;
color: #fff;
background: rgba(47,47,47,0.8);
z-index:1000;
overflow: hidden;
cursor: pointer;
}

jQuery代码：

jQuery(document).ready(function ($) {

    $('.btn').on('click', function() {
        $('.popup').hide();
        $(this).find('.popup').show();
    });

    $('.popup').on('click', function() {
        $(this).hide();
    });
});

因此，当我单击每个按钮时，它会成功关闭现有的弹出窗口并打开正确的弹出窗口。这意味着第一个$('.popup').hide();确实有效，但

第二个$(this).hide();不起作用。我试过$('.popup').hide();但仍然没有运气。问题是我之前使用过这段代码来关闭弹出窗口几次并且它完美地运行了。

此外，我在开始时使用此行显示弹出式div $(this).next('.popup').show();，但在.next()更改为.find()之前它没有用。只是没有得到它，有人可以解释一下它们之间的区别吗？它应该双向工作。

我是jQ的初学者，可能缺少一些基本的东西。

任何帮助表示赞赏。感谢。

Answer 1

使用event.stopPropogation()阻止.btn点击事件

jQuery(document).ready(function ($) {

    $('.btn').on('click', function() {
        $('.popup').hide();
        $(this).find('.popup').show();
    });

    $('.popup').on('click', function(e) {
        e.stopPropagation();
        $(this).hide();
    });
});

.popup位于div .btn内。点击.popup div时，两者都会被触发，这就是为什么它不会隐藏。

<强> FIDDLE DEMO

Answer 2

在此方案中，单击弹出窗口作为其父元素时，将调用btn click事件。因此弹出一次又一次地显示。你可以选择在jquery中阻止它调用stopPropagation。

event.stopPropagation（）是一种方法，可以阻止事件冒泡到父元素，从而阻止执行任何父事件处理程序。

这里你需要传递事件对象作为参数，我已经使用了＆＃39; e＆＃39; 纠正你的代码屁股跟随：

jQuery(document).ready(function ($) {  

    $('.btn').on('click', function() {
       $('.popup').hide();
       $(this).find('.popup').show();
    });

    $('.popup').on('click', function(e) {
        e.stopPropagation();
        $(this).hide();
    });
});

$（本）.hide（）;无论如何都不会关闭弹出窗口。 jQuery的

2 个答案: