web-dev-qa-db-ja.com

jQuery .toggle（）がIE

テーブルの行を表示/非表示にするためにjQueryのtoggle（）を使用しています。 FireFoxでは正常に機能しますが、IE 8.では機能しません。

.show()/.hide()でも問題なく動作します。

slideToggle（） はIEでも機能しません-1秒間表示された後、再び消えます。FireFoxでは正常に機能します。

私のHTMLはこれに似ています

<a id="readOnlyRowsToggle">Click</a>  
<table>  
  <tr><td>row</td></tr>  
  <tr><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
</table>

JavaScript

$(document).ready(function() {  
    $(".readOnlyRow").hide();  
    $("#readOnlyRowsToggle").click(function() {  
        $(".readOnlyRow").toggle();  
    });  
});
jqueryhtmltoggle
25
Robert MacLean

テーブルのtrで同じエラーが発生しました。 IE8のスクリプトデバッグツールを使用して調査を行いました。

最初にトグルを使ってみました：

$(classname).toggle();

これはFFでは機能しますが、IE8では機能しません。

次にこれを試しました：

if($(classname).is(":visible"))//IE8 always evaluates to true.
     $(classname).hide();
else
     $(classname).show();

このコードをデバッグしたとき、jqueryは常にそれが目に見えると思っていました。したがって、それは閉じますが、再び開くことはありません。

次に、これを次のように変更しました。

var elem = $(classname)[0];
if(elem.style.display == 'none')
     $(classname).show();
else
{
     $(classname).hide();               
}

それはうまくいきました。 jQueryは バグ を持っているか、おそらく私のhtmlは少し厄介です。いずれにせよ、これは私の問題を修正しました。

46
Brian Bolton

JQuery 1.4にアップグレードすることでこれが修正されますが、私はそれに取り組んでいますが、このページで私のために機能した唯一の「修正」はDough boyの答えでした。

$(document).ready(function() {  
  $(".readOnlyRow").hide();  
  $("#readOnlyRowsToggle").click(function() {  
    $(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');  
  });  
});
9
Robin Duckett

<tr class=".readOnlyRow"><td>row</td></tr>からピリオドを削除してください。 jQueryクラスを選択するための構文は、ピリオドを前に付けることですが、HTMLコードでは不要です。

6
Cᴏʀʏ

これはIE8では機能しないが、

$('.tableRowToToggle').toggle();

しかしこれはうまくいきます：

$('.tableRowToToggle').each(function(){this.toggle()});

前にここに投稿されたリンクjASTからアイデアを得ました

4
Priit

この問題は、TR要素の子を非表示にすることで修正しました。

toggleTr($(".toggletr"));

function toggleTr(el) {
    $(el).children('td').each(function() {
        $(this).toggle();
    });
}

これはFF3.5/FF3/IE8/IE7/IE6/Chrome/Safariでは問題ないようです。

4
J. Visser

私自身これに遭遇しました-私が見つけた最も簡単な解決策は以下を確認することです：

：隠されていない）

の代わりに

：目に見える

その後、それに応じて行動します。 。

3
marclar

これはJQuery 1.4で修正されたようです。

2
Maciej

テーブルはhtmlの興味深い部分であり、他の要素のように通常のルールに従っていません。

基本的にテーブルはテーブルとして表示されますが、テーブルには特別なルールがありますが、ブラウザ戦争である狂気のジェットコースターのため、これは古いブラウザでは適切に処理されませんでした。

基本的に古いブラウザでは、テーブルの表示プロパティは最小限であり、フローはほとんど文書化されていませんでした。そのため、table/tr/tdタグの事前定義値を変更する代わりに、次のクラスを追加および削除して、クラス自体のオンとオフを切り替えるのが最善です。 table/tr/tdの属性。

.tableHide {
    display: none;
}

<table>
<tr><td> Visible content</td></tr>
<tr><td> Visible content</td> <td class="**tableHide**"> **Hidden Content**</td></tr>
</table>

これは、表示を切り替えるために使用される別のクラスであるため、テーブル自体は変更されず、テーブルのプロパティを変更する必要もないため、表示および関連するレイアウトプロパティは、たとえブラウザは、舞台裏でそれを簡単に行いません。

2
timewaster51

同じ問題がありましたが、toggle/slideToggleをすべてのブラウザーで機能させるための素晴らしい回避策を見つけました。

<a id="myButton">Click</a>
<div id="myDiv" display="none">lorem ipsum .... text ....</div>

そして今JS：

    jQuery("#myButton").click(function () {
  var currentDisplay = jQuery("#myDiv").css("display"); // save the current Display value
  jQuery(#myDiv).slideToggle("fast", function () { // lets do a Nice slideToggle
    // this code will run AFTER the sildeToggle is done
    // so if slideToggle worked fine (in FF, chrome, ...) this will have no evect, since the value is already block or none
    // but in case IE 8 runs this script, it will set the css display to the current value
    if (currentDisplay == "none") {
      jQuery(#myDiv).css('display', 'block');
    }else {
      jQuery(#myDiv).css('display', 'none');
        }
    });
    return false;
});

その結果、slideToggleはIE8を除くすべてのブラウザーで正常に動作しますが、IE8は奇妙な（めちゃくちゃなスライド）のように見えますが、引き続き動作します。

1
Zauberfisch
$(document).ready(function() {  
    $(".readOnlyRow").hide();  
    $("#readOnlyRowsToggle").click(function() {  
        $(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');  
    });  
});

IE8がすべてをtrueと評価する原因となるjQueryバグがあります。上記をお試しください

1
Dough boy

Jquery mobileを含めた場合、トグルがiphoneで機能しない可能性があることに気づきました。 jqueryモバイルがロードされる前にトグル（.ready）を実行すると、問題ありません。

0
TroodoN-Mike