Question

我一直在打破这个问题 - 为什么下面的代码不起作用？

<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>

下面是jquery代码，它的工作原理很好，但是当我点击div中带有“x”类的x时，它就没有了。

$(".what .more").each(function(){
    $(this).find(".popup").hide();
});


$(".what").each(function(){
    $(this).find(".more").click(function() {
        $(".popup").hide();
        $(this).find(".popup").show();
        // return false;
    });

    $(this).find(".more .close").click(function() {
        // alert();
        $(".popup").hide();
    });
});

Answer 1

问题是当您单击关闭按钮时两个函数都在执行，因为它包含在具有.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();
});

带有新<span class="more link"/>元素的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>

查看此http://jsfiddle.net/M2dZN/1/

中的工作版本

通过单击子div关闭div

1 个答案: