devre dışı bırakma ve araç ipucunun çalışmaz hale getirilmesi

JQuery kullanarak açma/kapama araç ipucunu açıp kapatmaya çalışıyorum. ama doğru çalışmıyor gibi görünmüyor. Önyükleme araç ipucu kapatıldıktan sonra araç ipucunu tekrar açmayacağımı fark ediyorum. Araç ipucunu tekrar nasıl etkinleştiririm? yardımınıza minnettar olurum

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

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

$(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="">
  
</div>
</div> </div>

6
Bu gerçekten kafa karıştırıcı kod, sorunu izole etmeye çalışmalısınız.
katma yazar Choma, kaynak

8 cevap

geçiş-düğmesi kapalı olayınızın içinde, $ ('[data-toggle = "tooltip"]') araç ipucunu devre dışı bırakıyorsunuz araç ipucu ('disable');

Sonra açma/kapama düğmesi olayınızın içinde $ ('[data-toggle = "tooltip"]') ile etkinleştirmeniz yeterlidir. Tooltip ('enable'); code>

etkinleştirme()

Otherwise your code seems to work well.
Here is the working JSFiddle

0
katma

geçiş-düğmesi kapalı olayınızın içinde, $ ('[data-toggle = "tooltip"]') araç ipucunu devre dışı bırakıyorsunuz araç ipucu ('disable');

Sonra açma/kapama düğmesi olayınızın içinde $ ('[data-toggle = "tooltip"]') ile etkinleştirmeniz yeterlidir. Tooltip ('enable'); code>

etkinleştirme()

Otherwise your code seems to work well.
Here is the working JSFiddle

0
katma

Geçiş-düğme açma olay işleyicide etkinleştirmeniz gerekir:

$('[data-toggle="tooltip"]').tooltip('enable');

bu JSFiddle sayfasına bakın

0
katma

Geçiş-düğme açma olay işleyicide etkinleştirmeniz gerekir:

$('[data-toggle="tooltip"]').tooltip('enable');

bu JSFiddle sayfasına bakın

0
katma

Devre dışı bırakılmış bir araç ipucunu yeniden başlatmaya çalışıyormuşsunuz gibi görünüyor. Bu, araç ipucu zaten başlatılmış olduğundan çalışmıyor. Etkinleştirmeniz gerekiyor:

$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').tooltip('enable');

Alternatif olarak, araç ipucunu kullanarak devre dışı bırakmak yerine:

$('[data-toggle="tooltip"]').tooltip('disable');

Bunun yerine, araç ipucunu yok edin ve daha sonra başlangıçta yapmaya çalıştığınız gibi yeniden başlatabilirsiniz:

$('[data-toggle="tooltip"]').tooltip('destroy');
$(".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('destroy');
});

Güncellenen Örnek:

<div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden">

$(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('destroy');
  });
});
<!-- 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="">
  
</div>
</div> </div>

0
katma

Devre dışı bırakılmış bir araç ipucunu yeniden başlatmaya çalışıyormuşsunuz gibi görünüyor. Bu, araç ipucu zaten başlatılmış olduğundan çalışmıyor. Etkinleştirmeniz gerekiyor:

$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').tooltip('enable');

Alternatif olarak, araç ipucunu kullanarak devre dışı bırakmak yerine:

$('[data-toggle="tooltip"]').tooltip('disable');

Bunun yerine, araç ipucunu yok edin ve daha sonra başlangıçta yapmaya çalıştığınız gibi yeniden başlatabilirsiniz:

$('[data-toggle="tooltip"]').tooltip('destroy');
$(".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('destroy');
});

Güncellenen Örnek:

<div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden">

$(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('destroy');
  });
});
<!-- 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="">
  
</div>
</div> </div>

0
katma

toggleClass belgelerini kontrol edin

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

Applying .toggleClass( "bounce spin" ) to the same <div> alternates between <div class="tumble bounce spin"> and <div class="tumble">

So only use one $(".toggle-button-off").toggleClass("toggle-button-on"); and $(".toggle-button-on").toggleClass("toggle-button-off");

Then it will work.

0
katma
Senin öneri çalıştım işe yaramadı. Çalışan bir örnek göstermek mümkün mü?
katma yazar user244394, kaynak

toggleClass belgelerini kontrol edin

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

Applying .toggleClass( "bounce spin" ) to the same <div> alternates between <div class="tumble bounce spin"> and <div class="tumble">

So only use one $(".toggle-button-off").toggleClass("toggle-button-on"); and $(".toggle-button-on").toggleClass("toggle-button-off");

Then it will work.

0
katma
Senin öneri çalıştım işe yaramadı. Çalışan bir örnek göstermek mümkün mü?
katma yazar user244394, kaynak