隐藏下拉菜单当其他东西被点击时，除了下拉菜单本身

hide dropdown when something else is clicked except dropdown itself

本文关键字：下拉菜单 其他 隐藏      更新时间：2023-09-26

我在一个网站上有一个下拉菜单，我想隐藏它当别的东西被点击除了下拉元素本身。现在我有什么工作与jquery，但希望有相同的逻辑与香草javascript。我觉得我的jquery逻辑很笨拙，我已经思考了很长时间，我希望有一些输入。非常感谢。

$(document).on('click', function(e) {
    if ( $(e.target).closest('.icon').length ) {
      $('.dropdown').css('top','30px');
      $('.dropdown').css('opacity','1');
    }else if ( ! $(e.target).closest('.icon').length && !$(e.target).closest('.dropdown').length) {
      $('.dropdown').css('opacity','0');
      $('.dropdown').css('top','-530px');
    }
  });

试试这个，我建议修改类而不是手动修改代码中的css。

http://jsfiddle.net/dlizik/xeLbrnob/

(function(box, faded) {
    var elem = document.querySelector("."+box);
    var settings = { 
        elem: elem,
        classes: elem.className.split(" "),
        toggle: faded
    };    
    window.addEventListener("click", clickHandler, false);
    function clickHandler(e) {
        if (e.target !== elem) modifyClass.call(settings, false);
        if (e.target == elem) modifyClass.call(settings, true);
    }
    function modifyClass(bool) {
        var index = this.classes.indexOf(this.toggle);
        if (bool === true && index > -1) this.classes.splice(index, 1);
        if (bool === false && index < 0) this.classes.push(this.toggle);
        this.elem.className = this.classes.join(" ");
    }    
})("box", "faded");
相关文章：