Question

我有两个div：

第一个div：它的背景div“.menu_bg”（宽度+高度100％）

第二个div：其内容（可能是宽度+高度40％）

所以，如果我点击“第一个div / background div”，我希望“first＆amp; second div”淡出。我的问题是，当我只点击“第二个div /内容div”时也会发生这种情况。

这是我的代码：

(function(window) {
    'use strict';

    var body = document.body,
        mask = document.createElement("div"),
        toggleSlideTop = document.querySelector(".toggle-slide-top"),
        slideMenuTop = document.querySelector(".slide-menu-top"),
        activeNav;
    mask.className = "mask";

    /* slide menu top */
    toggleSlideTop.addEventListener("click", function() {
        classie.add(body, "smt-open");
        document.body.appendChild(mask);
        activeNav = "smt-open";
    });

    /* hide active menu */
    [].slice.call(document.querySelectorAll(".close-menu, .menu_bg")).forEach(function(el, i) {
        el.addEventListener("click", function() {
            classie.remove(body, activeNav);
            activeNav = "";
            document.body.removeChild(mask);
        });
    });
})(window);

怎么了？

更新

我创建了一个fiddle。

Answer 1

好像你的第二个div嵌套在第一个div上。在这种情况下，在第二个event.stopPropagation()上触发的任何事件都将传播到所有父元素，直到您调用click方法。所以你需要的是从document.querySelector('ul').addEventListener('click', function(e) { e.stopPropagation(); });监听器中添加到嵌套元素中调用此方法。像这样的东西：

INNER JOIN

只想通过背景div＆amp;关闭菜单按键

1 个答案: