如果在内部单击下拉菜单，则不应将其关闭

Question

我在一个bootstrap下拉菜单中放置了一个面板，但当我在面板内单击时，该下拉菜单就消失了。我在stackoverflow上得到了很多解决方案，但它对我来说不起作用。如何防止在单击内部时面板消失。enter code here

   <span class="input-group-addon dropdown">
      <label class="dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown aria-expanded="false">Advanced Search  <span class="caret"></span></label>
      <div class="panel panel-default panel-body dropdown-menu " role="menu"" aria-labelledby="dropdownMenu1" style="width:860px; margin-left:-700px">
        Panel content
      </div>
   </span> 

Answer 1

尝试这样做:如果你点击body，它会检查父类，如果你点击下拉菜单，如果parent有.dropdown-parentclass类，那么下拉菜单不会关闭。

$('body').click(function(event){
    if ($(event.target).parent('.dropdown-parentclass').size()>0) {
        return false;
    }
});

Answer 2

尝试使用下面的代码。只有当您单击容器外部时，它才会关闭下拉列表。

      $(document).on("mouseup", function (e) {
        var container = $(".panel");

        if (!container.is(e.target) // if the target of the click isn't the container
            && container.has(e.target).length === 0) // nor a descendant of the container
        {
            container.hide();
        }
        else {

        }
    });