gpt4 book ai didi

javascript - 如果数据由ajax填充,如何隐藏下拉列表

转载 作者:行者123 更新时间:2023-12-03 05:40:00 25 4
gpt4 key购买 nike

我制作了一个简单的下拉列表,其中的数据由 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com