Jquery 通过单击子div关闭div

我一直在为此伤脑筋-为什么下面的代码不起作用

<div class="what">
<ul>

<li class="popup1">
    <div class="holder">
        <div class="big">Popup 1
            <div class="more">more+
                <div class="popup">Contents of popup 1</p>
                    <div class="close">x</div>
                </div>
            </div>
        </div>
    </div>
</li>

...

<li class="popup3">
    <div class="holder">
        <div class="big">Popup 3
            <div class="more">more+
                <div class="popup">Contents of popup 3</p>
                    <div class="close">x</div>
                </div>
            </div>
        </div>
    </div>
</li>

</ul>
</div>

---

问题是，当您单击“关闭”按钮时，这两个函数都在执行，因为它包含在具有

.more

类的父容器中。因为Javascript是基于事件的，所以每个元素中的

hide（）

或多或少同时运行，而

show（）

最有可能最后执行，导致DIV仍然可见

您可以通过将

.more

移动到不是

.popup

父元素的其他元素来解决此问题

代码也可以简化-例如，您不需要使用

each（）

函数

// Hide all .popup elements when the DOM is ready
$(document).ready(function(){
    $(".popup").hide();
});

// Clicking any ".more .link" element will show that elements related content
$(".more.link").click(function() {
    // Hide all
    $(".popup").hide();
    // Go to this elements parent and then find .popup and show it
    $(this).parent().find(".popup").show();
});

// Clicking any .close will only execute this function and hide all .popup elements
$(".close").click(function() {
    $(".popup").hide();
});

带有新

元素的HTML

<li class="popup1">
    <div class="holder">
        <div class="big">Popup 1
            <div class="more">
                <span class="more link">more+</span>
                <div class="popup">Contents of popup 1
                    <div class="close">x</div>
                </div>
            </div>
        </div>
    </div>
</li>

弹出窗口1
更多+
弹出窗口1的内容
x

---

在这个

JSFiddle中查看一个工作版本：这确实是一个工作版本，但是没有其他方法可以让它与我的html代码一起工作吗？弹出窗口从“more”类获取其位置，现在这是不可能的。您可以将另一个类添加到“more”元素，并使选择器更具体。更新了answer/fiddle.Awesome中的代码，非常详细的答案-并且工作完美。谢谢。

<li class="popup1">
    <div class="holder">
        <div class="big">Popup 1
            <div class="more">
                <span class="more link">more+</span>
                <div class="popup">Contents of popup 1
                    <div class="close">x</div>
                </div>
            </div>
        </div>
    </div>
</li>