データがajaxによって満たされている場合にドロップダウンリストを非表示にする方法

データをajax呼び出しで満たす簡単なドロップダウンリストを作成しました。ここでデータが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>

ドロップダウンアイコンをクリックすると、クリックイベントが発生し、GET要求がに行われますnotification_list.php、それは正しくHTMLページに表示されるデータを正しくエコーします。

問題は、ドロップダウンアイコンをもう一度クリックすると、リストが消えないということです。クリックイベントのためか、クリックイベント内のいくつかのイベントを（コード内にコメント付きで）添付してドロップダウンリストは動作していないようです。

誰でもこのリストを削除する別のイベントを追加する方法を提案できますか？

出典

2016-11-13 Saurabh

あなたはドロップダウンに悪いhtmlタグを使用すると思います。 ['