我制作了一个简单的下拉列表，其中的数据由 ajax 调用填充。
这是代码(为了简单起见，我只是分享html页面的正文内容):
<body>
<div class="dropdown">
<span id ="id-wala" class="glyphicon glyphicon-th-large btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</span>
<span id="notification_count"></span>
<ul id ="fill_list" class="dropdown-menu" aria-labelledby="id-wala">
</ul>
</div>
<script type="text/javascript">
$("#id-wala").click(function(){
/*$("#id-wala").click(function(){
$("#id-wala").addClass("selected");
});*/
//$("#id-wala").next('ul#fill_list').hide();
$.ajax({
type:"GET",
url:"notification_list.php",
beforeSend: function(html) {
$("#fill_list").html('');
//$("#jk").show();
},
success: function(html){
$("#fill_list").show();
$("#fill_list").append(html);
}
});
});
</script>
</body>
单击下拉图标时，会触发 click 事件并向 notification_list.php 发出获取请求，它会正确回显数据，然后显示在 html 页面上。
问题是，当我再次单击下拉图标时，列表不会消失。也许是因为单击事件，我尝试在单击事件中附加一些事件(在代码中注释)以删除下拉列表列表，但它们似乎不起作用。
有人可以建议如何添加另一个事件来删除此列表吗？
最佳答案
这是因为您在 AJAX 返回时手动显示下拉列表:
success: function(html){
$("#fill_list").show();
...
Bootstrap JavaScript 已经可以处理隐藏/显示，您不需要这样做。
另一个问题是您在打开和关闭下拉列表时都进行 AJAX 调用。您可能应该只在打开时执行此操作。
关于javascript - 如果数据由ajax填充，如何隐藏下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40578004/