Javascript Jquery下拉列表无法正常工作

我用jquery、HTML和CSS创建了一个下拉列表。当用户在下拉列表外单击时，我想关闭下拉列表。但它不好用

JS

HTML

---

根据你在评论中所说的，这应该是你想要的

现在，它会在第一次单击时显示，并且在单击该选项时不会隐藏

函数{
$（“.drpdn单击”）。单击（函数（）{
变量$this=$（this）
var_drpdn_container=$（this）.attr（“数据drpdn点击”）；
var_drpdn_content=$（“[data drpdn content=“”+_drpdn_container+”）；
_drpdn_content.toggleClass（“drpdn显示”）；
$（文档）。单击（函数（事件）{
if（event.target！=$this[0]&&event.target！=\u drpdn\u content[0]）{
_drpdn_content.removeClass（“drpdn show”）；
}
});
$（此，_drpdn_内容）。单击（函数（事件）{
event.stopPropagation（）；
});
});
}
//运行组件函数
$（文档）.ready（函数（）{
_drpdntest（）；
});
.drpdn内容{
z指数：1000；
位置：绝对位置；
显示：无；
溢出：隐藏；
}
.drpdn-content.drpdn-show{
显示：块；
}

点击
主要
这是因为您没有为按钮单击添加
stopPropagation（）
。因此，单击按钮会触发文档单击

另外，
$（此，\u-drpdn\u内容）
应该是
$（\u-drpdn\u内容，此）
，或者在添加
停止播放时将其删除

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


函数{
$（“.drpdn单击”）。单击（函数（e）{
var_drpdn_container=$（this）.attr（“数据drpdn点击”）；
var_drpdn_content=$（“[data drpdn content=“”+_drpdn_container+”）；
_drpdn_content.sibbins（）.removeClass（“drpdn show”）；
_drpdn_content.addClass（“drpdn show”）；
$（\u drpdn\u内容）。单击（函数（事件）{
event.stopPropagation（）；
});
$（文档）。单击（函数（）{
_drpdn_content.removeClass（“drpdn show”）；
});
e、 停止传播（）；
});
}
//运行组件函数
$（文档）.ready（函数（）{
_drpdntest（）；
});
.drpdn内容{
z指数：1000；
位置：绝对位置；
显示：无；
溢出：隐藏；
}
.drpdn-content.drpdn-show{
显示：块；
}

点击
主要
当我运行您的代码并单击外部时，它会再次隐藏。所以看起来很好，当我第一次点击的时候它就不显示了。我不想在用户单击下拉列表时隐藏。不确定tbh，但它解决了您面临的问题吗？当我单击内容区域时，下拉列表会隐藏。抱歉无法工作欢迎@RishiThakur，很乐意帮助：-）
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();
});

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

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