Question

dropdown-submenu
{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
  color: #fff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top,#08c,#0077b3);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));
  background-image: -webkit-linear-gradient(top,#08c,#0077b3);
  background-image: -o-linear-gradient(top,#08c,#0077b3);
  background-image: linear-gradient(to bottom,#08c,#0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0);
}

新标签

  <li class="dropdown-submenu"><a href="#dp_1" class="dropdown-toggle" data-toggle="collapse">DATA POOL</a>
    <ul class="dropdown-menu" id="drp1">
      <li><a href="#dp_1" data-toggle="tab">Tab1</a></li>
      <li><a href="#dp_2"  data-toggle="tab">Tab2</a></li>
      <li><a href="#dp_3"  data-toggle="tab">Tab3</a></li>
      <li><a href="#dp_4"  data-toggle="tab">Tab4</a></li>
      <li><a href="#dp_5"  data-toggle="tab">Tab5</a></li>
    </ul>
  </li>

当我点击dropdwn子菜单的链接时，链接可以正常工作，但是当我第二次单击链接时它不起作用，并且无法更改选项卡窗格。请告诉我解决方案。

Answer 1

修改

Fixture说明=

首先，我找到了用逻辑制作的脚本。其次，在深入研究你的代码之后，我发现了你想要实现的东西..代码中的问题是，在多下拉方法中，选项卡单击变得混乱，活动类被添加到所有列表项，初始化选项卡导致点击阻止我们第二次点击它们。所以为了解决这个问题，我使用了一种修复问题的方法.Below是代码：

$(document).ready(function() { $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { $('a[data-toggle="tab"]').not(this).parent().removeClass('active'); }); });

此代码基本上删除了任何其他列表项上的类，并仅将类添加到当前单击元素，从而使选项卡完美运行。

下面是id thw work snippet：

$(document).ready(function() { $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { $('a[data-toggle="tab"]').not(this).parent().removeClass('active'); }); });

.dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <ul class="nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a> <ul class="dropdown-menu multi-level"> <li><a href="#asad1">jQuedasdsadry</a></li> <li class="dropdown-submenu"><a href="#">Open </a> <ul class="dropdown-menu " id="MyTab"> <li><a href="#dp_1" data-toggle="tab">Tab1</a></li> <li><a href="#dp_2" data-toggle="tab">Tab2</a></li> <li><a href="#dp_3" data-toggle="tab">Tab3</a></li> <li><a href="#dp_4" data-toggle="tab">Tab4</a></li> <li><a href="#dp_5" data-toggle="tab">Tab5</a></li> </ul> </li> </ul> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="dp_1"> <h4><i class="glyphicon glyphicon-user"></i></h4>Tab content 1 </div> <div class="tab-pane" id="dp_2"> <h4><i class="glyphicon glyphicon-user"></i></h4>Tab content 2 </div> <div class="tab-pane" id="dp_3"> <h4><i class="glyphicon glyphicon-user"></i></h4>Tab content 3 </div> <div class="tab-pane" id="dp_4"> <h4><i class="glyphicon glyphicon-user"></i></h4>Tab content 4 </div> <div class="tab-pane" id="dp_5"> <h4><i class="glyphicon glyphicon-user"></i></h4>Tab content 5 </div> </div>

Answer 2

希望这适合你。

<script>
$(document).ready(function(){
 $('.dropdown-submenu a.test').on("click", function(e){
   $(this).next('ul').toggle();
   e.stopPropagation();
   e.preventDefault();
var arr= $(this).next('ul')[0].children;
var array = $.map(arr, function(value, index) {
    return [value];
});
array.forEach(function(){
$("li").click(function() {
    $(this).toggleClass("active");
  $(this).siblings().removeClass("active");
});
});
 });
});
</script>

Answer 3

  $('.dropdown-toggle').dropdown();

初始化下拉切换，它会起作用。调用以上功能。

下拉子菜单链接在第二次单击时无法更改选项卡窗格

3 个答案: