jquery - Bootstrap 操作下拉列表在表格响应中不起作用

标签 jquery html css twitter-bootstrap

Bootstrap 下拉菜单在响应式和桌面上都不起作用，因为我在 table-responsive 中使用它并且有 overflow 属性。

有人能解决吗？

谢谢

.dropdown-toggle{ cursor:pointer;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Email</th>
<th>Lastname</th>
<th>Password</th>
<th>Phone</th>
<th>Created By</th>
<th>Registration Date</th>
<th>Action</th>


</tr>
</thead>
<tbody>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>



</tbody>
</table>
</div>
</div>

最佳答案

给您一个解决方案 https://jsfiddle.net/n2omqzpu/1/ 

$('a[class="dropdown-toggle"]').click(function(){
	var pos = $(this).closest('td').position();
  var ele = $(this).siblings('ul.dropdown-menu');
 	var width = $(document).width() - 200;

  if( width > pos.left) {
    $(ele).css({
      left: pos.left,
      top: (pos.top + 20)
  });
  } else {
     $(ele).css({
      left: (pos.left - 180),
      top: (pos.top + 20)
     });
  }
});
.dropdown-toggle{ cursor:pointer;}

.dropdown-menu{
  position:fixed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Email</th>
<th>Lastname</th>
<th>Password</th>
<th>Phone</th>
<th>Created By</th>
<th>Registration Date</th>
<th>Action</th>


</tr>
</thead>
<tbody>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>



</tbody>
</table>
</div>
</div>

定位 dropdown 元素需要一点动态计算。将下拉菜单设置为固定位置。

关于jquery - Bootstrap 操作下拉列表在表格响应中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45499458/

上一篇：javascript - 禁用悬停并允许单击 twitter bootstrap 中的子菜单

下一篇：html - 垂直分屏自定义形状

相关文章：

css - 带有伪元素的可滚动/可悬停的 CSS 工具提示

css - 带下拉菜单的 Bootstrap 面板选项卡

jquery - 使用 jquery/ajax 从 xml 到 html 表

javascript - 在计时器上更改 jQuery 中的 CSS 背景颜色

javascript - 单选按钮与列表的多个问题

jquery - 使用 jquery 从数组更改图像 src

html - 在图像上定位

javascript - 在 html 中强制所有 720 高清的 YouTube 视频播放

javascript - 多行 JSON 字符串到多行 Javascript 字符串

html - 如何使用 html 和 css 使文本出现在上方

©2024 IT工具网  联系我们