1

基本的に私の問題は、ツールチップがトグルのテキストを変更しないことです。展開/折りたたみ機能を備えたページがあります。通常、上矢印の上にカーソルを置くと、タイトル タグに「パネルを折りたたむ」と表示されます。矢印ボタンをクリックして 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");
  });
4

2 に答える 2

1

uiTooltipTitledata 属性を使用して、ツールチップ テキストを手動で設定できます。

$("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");    
  });
于 2013-01-23T15:41:21.227 に答える
0 
$("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");
  }
});
于 2013-01-23T14:58:10.970 に答える