1

当我单击它时，我在 Twitter Bootstrap 选项卡中的下拉列表没有做任何事情。我已经在 Stackoverflow 上搜索了可能的解决方案，但它们仍然不适合我。我已经删除了 data-toggle='tab' 。

仅供参考 - 我正在使用 Twitter Bootstrap 3.0

请参见下面的代码：

<ul class="nav nav-tabs case-detail-nav" id="myTab">
   <li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Text Files<b class="caret"></b></a>
   <ul class="dropdown-menu" role="menu">
     <li><a href='http://www.google.com/'>google</a></li>
   </ul>
   </li>
   <li class="active"><a href="#general">General</a></li>
 </ul>

请参阅 Javascript：

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })


  $('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})  
</script>

非常感激！

4

2 回答 2

1

您的问题在于preventDefault锚点点击，您不想为下拉菜单中的点击做这件事。所以在防止默认之前做一个检查。preventDefault()将阻止锚点的默认行为，并且当您尝试显示$(this).tab('show')引导程序时，会将 href 作为选择器来选择要显示为选项卡的元素（由于选择器中的字符无效，这也会导致 jquery 嘶嘶声中的错误）。

 $('#myTab a').click(function (e) {
     if (!$(this).closest('.dropdown-menu').length) { //check if this is from dropdown
         e.preventDefault();
         $(this).tab('show');
     }
 });

或者仅针对真正的选项卡触发器。

$('#myTab > li > a').click(function (e) {
         e.preventDefault();
         $(this).tab('show');
 });
于 2013-09-24T20:18:20.640 回答
1

对于其他遇到类似问题的人...

我有同样的问题，但在我的情况下，删除 data-toggle 属性解决了这个问题：

<ul class="dropdown-menu">
    <li><a href="http://www.gavinharriss.com/" target="_blank" data-toggle="collapse">Some link</a></li>
</ul>

变成

<ul class="dropdown-menu">
    <li><a href="http://www.gavinharriss.com/" target="_blank">Some link</a></li>
</ul>
于 2015-05-06T10:11:55.920 回答