Question

我制作了一个简单的下拉列表，其中数据由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发出get请求，它会正确回显html页面上显示的数据。

问题是，当我再次单击下拉图标时，列表不会消失。也许是因为点击事件，我试图在点击事件中附加一些事件（在代码中注释）以删除下拉列表列表但它们似乎不起作用。

有人可以建议如何添加其他事件来删除此列表吗？

Answer 1

这是因为你在AJAX回来时手动显示下拉列表：

success: function(html){
  $("#fill_list").show();
...

Bootstrap JavaScript已经处理了隐藏/显示，你不需要这样做。

另一个问题是你在打开和关闭下拉列表时都在进行AJAX调用。你应该只在开放时这样做。

如果数据由ajax填充，如何隐藏下拉列表

1 个答案: