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");

  });

因此使用destroy / create方法进行更新。我可以在第一次点击时将工具提示更改为扩展，但它仍保持“展开”状态。我用过这个：

$("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");
  }
});

切换工具提示文本

2 个答案: