jquery - $(this).hide();无论如何都不会关闭弹出div。查询

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();
    });
});

因此，当我单击每个按钮时，它会成功关闭现有的弹出式 div 并打开正确的弹出式 div。这意味着第一个 $('.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