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