Question

我在网站上有一个下拉菜单，我希望在点击其他内容时隐藏它，除了下拉元素本身。现在我和jquery一起工作，但是喜欢和vanilla 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');
    }
  });

Answer 1

试试这个，我建议修改类而不是手动修改代码中的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");

单击其他内容时隐藏下拉列表，除了下拉列表本身

1 个答案: