切换工具提示文本

Question

基本上我的问题是我的工具提示不会在切换时更改文本。我有一个具有展开/折叠功能的页面。通常，当您将鼠标悬停在向上箭头上时，标题标签会显示折叠面板。当您单击箭头按钮以折叠 div 面板时，img 会发生变化（现在箭头将指向下方，并且标题标签应更改为展开面板）。这有效，并且标题在没有工具提示的情况下更改。添加工具提示时，文本不会更改。我相信你必须在点击时销毁并创建一个新的工具提示，但我不知道该怎么做。他是我的代码，在此先感谢。

$("img.toggle1").click(function(){
  if (document.getElementById("panel1").style.display != "none") { // is the div hidden?
    $("img.toggle1").attr("src", "images/expander-down.png");
    $("img.toggle1").attr("title", "Expand this section");
     }
  else{ // is the div showing?
    $("img.toggle1").attr("src", "images/expander-up.png");
    $("img.toggle1").attr("title", "Collapse this section");
    $('div#header1').addClass('headerBarFirstOff');
  }
    $("div.panel1").slideToggle("slow");

  });

所以使用销毁/创建方法进行更新。我可以让工具提示在第一次点击时更改为展开，但它保持为“展开”。我用这个：

$("img.toggle1").click(function(){
  if (document.getElementById("panel2").style.display != "none") {
    $("img.toggle1").attr("src", "images/expander-down.png");
    $(document).tooltip("destroy"); //here's the change, the tooltip toggles once
    $(document).tooltip(); //here's the change, the tooltip toggles once
    $("img.toggle1").attr("title", "Expand this section");
     }
  else{
    $("img.toggle1").attr("src", "images/expander-up.png");
    //$(document).tooltip("destroy"); //doesn't work here
    //$(document).tooltip(); //doesn't work here
    $("img.toggle1").attr("title", "Collapse this section");
  }

另外，我有复选框（隐藏/显示特定面板）和打开或关闭所有按钮：

$(document).ready(function(){
$("input.togglePanel1").click(function(){
  if($(".togglePanel1").length == $(".togglePanel1:checked").length) { 
    $("div.panel1").slideDown("slow");
    } else {  
    $("div.panel1").slideUp("slow");
    }
  });
$("input.togglePanel2").click(function(){
  if($(".togglePanel2").length == $(".togglePanel2:checked").length) { 
    $("div.panel2").slideDown("slow");
    } else {  
    $("div.panel2").slideUp("slow");
    }
  });
$("input.togglePanel3").click(function(){
  if($(".togglePanel3").length == $(".togglePanel3:checked").length) { 
    $("div.panel3").slideDown("slow");
    } else {  
    $("div.panel3").slideUp("slow");
    }
  });

$("img#closeAll").click(function(){
    $("div.panel1").slideUp("slow");
    $("div.panel2").slideUp("slow");
    $("div.panel3").slideUp("slow");
    $("div.panel4").slideUp("slow");
    $("div.panel5").slideUp("slow");
  });
$("img#openAll").click(function(){
    $("div.panel1").slideDown("slow");
    $("div.panel2").slideDown("slow");
    $("div.panel3").slideDown("slow");
    $("div.panel4").slideDown("slow");
    $("div.panel5").slideDown("slow");
  });

Answer 1

您可以使用uiTooltipTitle 数据属性手动设置工具提示文本

$("img.toggle1").click(function(){
  var ishidden = $('#panel1').is(':hidden');
  var src = ishidden ? "images/expander-down.png" : "images/expander-up.png"
  var title = ishidden ? "Expand this section" : "Collapse this section";
  $("img.toggle1")
           .attr("src", src);
  $("img.toggle1")
           .attr("title", title)
           .data('uiTooltipTitle', title);      
  $("div.panel1").slideToggle("slow");

  });

http://jsfiddle.net/SHBWW/

使用 if/else

$("img.toggle1").click(function(){
    if($('#panel1').is(':hidden')){
        $("img.toggle1").attr("src", "images/expander-down.png");
        $("img.toggle1")
           .attr("title", "Expand this section")
           .data('uiTooltipTitle', "Expand this section");  
    }else{
        $("img.toggle1").attr("src", "images/expander-up.png");
        $("img.toggle1")
           .attr("title", "Collapse this section")
           .data('uiTooltipTitle', "Collapse this section");  
    }       
    $("div.panel1").slideToggle("slow");    
  });

Answer 2

$("img.toggle1").click(function(){
  if ($("#panel1").is(":visible")) { 
    //do something
    $("img.toggle1").removeAttr('title');
    $("img.toggle1").attr("title", "Expand this section");
  }
  else{
    //do something
    $("img.toggle1").removeAttr('title');
    $("img.toggle1").attr("title", "Collapse this section");
  }
});