jquery dropdown不能正常工作

Question

我正在用jQuery，HTML和CSS创建一个下拉菜单。我想在用户点击下拉菜单之外时关闭下拉菜单。但它不能正常工作。

JS

function _drpdntest() { 
$(".drpdn-click").click(function(){ 
var _drpdn_container = $(this).attr("data-drpdn-click"); 
var _drpdn_content = $('[data-drpdn-content="'+_drpdn_container+'"]'); 
_drpdn_content.toggleClass("drpdn-show"); 
_drpdn_content.siblings().removeClass("drpdn-show"); 
$(document).click(function(event){ 
_drpdn_content.removeClass("drpdn-show"); 
}); 
$(this, _drpdn_content).click(function(event){ 
event.stopPropagation(); 
}); 
}); 
} 
// Run Component Function 
$(document).ready(function(){ 
_drpdntest(); 
}); 

HTML

<button class="drpdn-click" data-drpdn-click="main">CLICK</button> 
<div class="drpdn-content drpdn-body" data-drpdn-content="main"> 
Main 
</div> 

CSS

.drpdn-content { 
z-index: 1000; 
position: absolute; 
display:none; 
overflow: hidden; 
} 
.drpdn-content.drpdn-show { 
display: block; 
} 

Answer 1

这是因为你还没有为按钮，点击添加stopPropagation()。由于它在按钮上单击它触发文档点击。

另外$(this, _drpdn_content)应该是$(_drpdn_content, this)或干脆删除这个，而添加stopPropagation。

这里第二个参数提供了执行选择器搜索的上下文，简言之，第二个参数是parent，并且您正在说要搜索与第一个参数中提供的选择器匹配的所有childs。

function _drpdntest() { 
 
    $(".drpdn-click").click(function(e) { 
 

 
    var _drpdn_container = $(this).attr("data-drpdn-click"); 
 
    var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]'); 
 

 
    _drpdn_content.siblings().removeClass("drpdn-show"); 
 
    _drpdn_content.addClass("drpdn-show"); 
 
    $(_drpdn_content).click(function(event) { 
 
     event.stopPropagation(); 
 
    }); 
 
    $(document).click(function() { 
 
     _drpdn_content.removeClass("drpdn-show"); 
 
    }); 
 
    e.stopPropagation(); 
 
    }); 
 
} 
 
// Run Component Function 
 
$(document).ready(function() { 
 
    _drpdntest(); 
 
});

.drpdn-content { 
 
    z-index: 1000; 
 
    position: absolute; 
 
    display: none; 
 
    overflow: hidden; 
 
} 
 

 
.drpdn-content.drpdn-show { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="drpdn-click" data-drpdn-click="main">CLICK</button> 
 
<div class="drpdn-content drpdn-body" data-drpdn-content="main"> 
 
    Main 
 
</div>

Answer 2

这应该是你想要什么，根据你

现在在注释中说节目在第一次点击时，一个d当您点击该选项时，它不会隐藏。

function _drpdntest() { 
 
    $(".drpdn-click").click(function() { 
 
    var $this = $(this) 
 
    var _drpdn_container = $(this).attr("data-drpdn-click"); 
 
    var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]'); 
 
    _drpdn_content.toggleClass("drpdn-show"); 
 
    $(document).click(function(event) { 
 
     if (event.target != $this[0] && event.target != _drpdn_content[0]) { 
 
     _drpdn_content.removeClass("drpdn-show"); 
 
     } 
 
    }); 
 
    $(this, _drpdn_content).click(function(event) { 
 
     event.stopPropagation(); 
 
    }); 
 
    }); 
 
} 
 
// Run Component Function 
 
$(document).ready(function() { 
 
    _drpdntest(); 
 
});

.drpdn-content { 
 
    z-index: 1000; 
 
    position: absolute; 
 
    display: none; 
 
    overflow: hidden; 
 
} 
 

 
.drpdn-content.drpdn-show { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="drpdn-click" data-drpdn-click="main">CLICK</button> 
 
<div class="drpdn-content drpdn-body" data-drpdn-content="main"> 
 
    Main 
 
</div>