Bootstrap Modal 在下拉列表中不起作用

Question

这是我正在使用的代码。这在 codepen 中运行良好，但在我的本地站点中却不行。 当我在下拉菜单外打开一个模式时，它很好，但不在下拉菜单内。

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu ul-drp" role="menu">

<li class="li-drp"><a href="#" data-toggle="modal" data-target="#myModal"> Edit</a></li>
  <li class="li-drp"><a href="#"> Delete</a></li>
  </ul>
</div>

 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
    ...
    </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

我正在将此 js 代码用于其他下拉菜单以保持活动状态

<script>
    $('.dropdown-menu').click(function (event) {
        event.stopPropagation();
    });
</script>

如果我删除此代码，则它可以正常工作，但我希望此下拉菜单保持活动状态并打开一个模式。

Answer 1

好的，根据我从您上面的 cmets 中读取的您的输入，我假设 dropdown menu 中会有一个 textbox，并且您不想在单击特定的 textbox 时关闭 dropdown，所以下面代码有效。

$('.dropdown-menu li').click(function (event) {
     var children=$(this).children("input[type=text]");
     if(children.length!=0)
     {
         alert('found');
         event.stopPropagation();
     }
});

这里是DEMO