Bootstrap Modal在下拉列表中不起作用 [英] Bootstrap Modal not working inside dropdown list

问题描述

这是我正在使用的代码。这在codepen中工作正常，但不在我的本地站点中。
当我在下拉菜单之外打开一个模式，那么它的罚款，但不是在下拉菜单。

 < div class = BTN-组 > 
< button type =buttonclass =btn btn-default dropdown-toggledata-toggle =dropdownaria-expanded =false> 
< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menu ul-drprole =menu> 
 
< li class =li-drp>< a href =＃data-toggle =modaldata-target =＃myModal>编辑< / A>< /锂> 
< li class =li-drp>< a href =＃>删除< / A>< /锂> 
< / ul> 
< / div> 
 
 <！ -  Modal  - > 
< div class =modal fadeid =myModaltabindex = -  1role =dialogaria-labelledby =myModalLabelaria-hidden =true> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;<<< ; /跨度>< /按钮> 
< h4 class =modal-titleid =myModalLabel>模式标题< / h4> 
< / div> 
< div class =modal-body> 
 ... 
< / div> 
< div class =modal-footer> 
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button> 
< button type =buttonclass =btn btn-primary>保存更改< / button> 
< / div> 
< / div> 
  

m使用此js代码用于其他下拉菜单以保持活动状态

 < script> 
 $（'。dropdown-menu'）。click（function（event）{
 event.stopPropagation（）; 
}）; 
< / script> 
  

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

解决方案

好的，根据您的意见，我从上面的评论中读到我会假设会有一个 下拉菜单中的文本框，并且您不希望在特定<$ $时关闭下拉菜单

  $（'。dropdown （children.length！= 0）; 
 var（child）= $ 
 {
 alert（'found'）; 
 event.stopPropagation（）; 
} 
}）; 
  

以下是 DEMO

This is the code that I'm using. This is working fine in codepen but not in my local site. When I open a modal outside the dropdown menu then its fine but not inside the dropdownmenu.

<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>

I'm using this js code for other dropdown menu to stay active

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

If I remove this code then its working fine but I want this dropdown to stay active and open a modal.

解决方案

Ok as per your inputs I read from your comments above I would assume that there will a textbox in dropdown menu and you do not want to close dropdown when that particular textbox is clicked and so the below code works.

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

Here is the DEMO

这篇关于Bootstrap Modal在下拉列表中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！