Question

请检查一下。这是小提琴：http://jsfiddle.net/4467yz37/

当我点击链接时，它运作良好（Show and Hide）。当我想要隐藏“项目”部分，在“链接”和“项目”之外进行单击时（除了“项目”部分中的Body之外），唯一存在的问题是。

以下是JavaScript代码：

(function(document) {    
    var alterNav = function() {
        var item = document.querySelector('.items');
        var link = document.querySelector('.clickme');
        var theClass = 'display';
        var itemIsOpened = false;

        if (link) {
            link.addEventListener('click', function (event) {
                event.preventDefault();

                if (!itemIsOpened) {
                    itemIsOpened = true;
                    addClass(item, theClass);
                } else {
                    itemIsOpened = false;
                    removeClass(item, theClass);
                }
            });
        }
    };    

    var addClass = function (element, className) {
        if (!element) {
            return;
        }
        element.className = element.className.replace(/\s+$/gi, '') + ' ' + className;
    };

    var removeClass = function(element, className) {
        if (!element) {
            return;
        }
        element.className = element.className.replace(className, '');
    };    

    alterNav();
})(document);

我尝试使用标记Html或Body创建另一个变量并更改JS代码，但它仍然无法正常工作：http://jsfiddle.net/g1d321rv/2/

var link = document.querySelector('body');

Answer 1

我稍微操纵了你的代码。你用jquery吗？我保证你没有使用jquery.Here jsfiddle：

http://jsfiddle.net/9fpf07mt/

window.onclick = function (e) {
    console.log(e);
    if (!itemIsOpened) {
        if (e.target == link) {
            itemIsOpened = true;
            addClass(item, theClass);
        }
    } else {
        if (!isChild(e.target, item)) {
            itemIsOpened = false;
            removeClass(item, theClass);
        }
    }
};

编辑上次请求：

link.addEventListener('click', function (event) {
                event.preventDefault();
            });

如何在我的HTML页面中的部分外单击时隐藏部分？

1 个答案: