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

请检查一下。这是小提琴：

当我点击链接时，效果很好（

Show and Hide

）。唯一存在的问题是，当我想隐藏“项目”部分时，在链接和项目外部单击（即在

正文中，项目部分除外）

以下是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代码来解决这个问题，但仍然不能很好地工作：

我稍微操纵了你的代码。您使用jquery吗？我假设您没有使用jquery。这里是JSFIDLE：





为最后一个请求编辑：

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

因此，您希望通过单击页面上的任意位置，在单击“显示”后隐藏显示的项目。这是你想要的吗？是的，先生。仅通过单击链接显示，并通过单击页面中显示项目以外的任何位置隐藏。“指向jsfiddle.net的链接必须附带代码。请使用代码工具栏按钮或CTRL+K键盘快捷键将所有代码缩进4个空格。有关更多编辑帮助，请单击[？]工具栏图标。”@caslaner是否可以仅使用
addEventListener
？因为使用
window.onclick
会改变URL@卡斯兰纳-我终于明白了！非常感谢！我只添加了
e.preventDefault（）到函数，工作正常！
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();
            });