禁用并启用工具提示无法正常工作

Question

我试图关闭并使用jquery打开引导工具提示切换.但它似乎没有正常工作.我注意到一旦引导工具提示被关闭,它就不会再将工具提示再次打开.如何重新启用工具提示？感谢您的帮助

 .fa-3x {
  background-color: yellow;
}
.fa-lg {
  background-color: blue;
}
.toggle-button-on {
  color: green;
}
.toggle-button-off {
  color: red;
}  

$(document).ready(function() {
  $("ul.nav li ").click(function() {
$(this).toggleClass("toggle-button-on").find(".fa-3x").removeClass("fa-3x").addClass("fa-lg").css("border", "3px solid red");
  });
  $(".nav").on("click", ".toggle-button-on", function() {
$(".toggle-button-on").toggleClass("toggle-button-on toggle-button-off");
$(".nav .fa-3x").toggleClass("fa-3x fa-lg");
$('[data-toggle="tooltip"]').tooltip();
  });
  $(".nav").on("click", ".toggle-button-off", function() {
$(".toggle-button-off").toggleClass("toggle-button-off toggle-button-on");
$(".nav .fa-lg").toggleClass("fa-lg fa-3x");
 $('[data-toggle="tooltip"]').tooltip('disable');
   // $('[rel=tooltip]').tooltip('disable') // Hide and destroy tooltips
  });
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div ng-controller="" ng-Click="">
  <ul class="nav">
<li>
  <a class="toggle-button-on"><i class="fa fa-exchange">toggle</i></a>
</li>
<li>
  <a ui-sref="Home" ng-class=""  data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">
    <i class="fa fa-home fa-3x">fa </i>
    <span>Home</span>
  </a>
</li>
<li>
  <a ng-class="">
    <i class="fa fa-bar-chart-o fa-3x"  data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">fa </i>
    <span>Work </span>
  </a>
</li>
<li>
  <a ui-sref="Music" ng-class=""  data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">
    <i class="fa fa-table fa-3x">fa </i>
    <span>Scenario <br/>Music</span>
  </a>
</li>
<li>
  <a ui-sref="faq"  data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">
    <i class="fa fa-faq fa-3x">fa </i> 
    <span>Faq</span> 
  </a>
</li>
  </ul>
</div>

Answer 1

检查toggleClass的文档

<div class="tumble">Some text.</div> 

适用.toggleClass( "bounce spin" )于相同的<div>交替<div class="tumble bounce spin">于和 <div class="tumble">

所以只用一个$(".toggle-button-off").toggleClass("toggle-button-on");和$(".toggle-button-on").toggleClass("toggle-button-off");

然后它就会起作用。