25

jQueryのtoggle（）を使用してテーブルの行を表示/非表示にしています。FireFoxでは正常に動作しますが、IE8では動作しません。

.show()/.hide()でもうまくいきます。

slideToggle（）はIEでも機能しません-一瞬表示された後、再び消えます。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();  
    });  
});
4

13 に答える 13

46

テーブルの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が少し厄介かもしれません。いずれにせよ、これで私の問題は解決しました。

于 2009-07-09T15:33:56.157 に答える
9

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

$(document).ready(function() {  
  $(".readOnlyRow").hide();  
  $("#readOnlyRowsToggle").click(function() {  
    $(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');  
  });  
});
于 2010-02-24T16:57:42.417 に答える
6

からピリオドを削除します<tr class=".readOnlyRow"><td>row</td></tr>。jQueryクラス選択の構文は、ピリオドを前に付けることですが、HTMLコードでは必要ありません。

于 2009-06-10T12:12:50.450 に答える
4

これはIE8では機能しないことがわかりました

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

しかし、これは機能します：

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

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

于 2009-08-24T09:29:32.693 に答える
4

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

toggleTr($(".toggletr"));

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

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

于 2009-08-25T11:54:07.527 に答える
3

自分でこれに遭遇したばかりです。私が見つけた最も簡単な解決策は、次のことを確認することです。

：隠されていない）

それ以外の

：見える

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

于 2009-07-15T18:08:06.627 に答える
2

これはJQuery1.4で修正されたようです。

于 2010-04-29T17:18:57.603 に答える
2

テーブルは興味深い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>

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

于 2012-01-09T18:05:30.620 に答える
1 
$(document).ready(function() {  
    $(".readOnlyRow").hide();  
    $("#readOnlyRowsToggle").click(function() {  
        $(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');  
    });  
});

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

于 2009-07-14T14:39:07.580 に答える
1

同じ問題が発生しましたが、すべてのブラウザで作成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は、奇妙に見えます（スライドがめちゃくちゃになっています）が、それでも機能します。

于 2010-09-25T20:38:09.450 に答える
0

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

于 2013-06-03T12:44:24.783 に答える
-1

をクリックしてもらうため<a>、falseを返す関数が必要です。

于 2009-06-10T12:10:34.340 に答える
-1

私もこれに気づきました。代わりに、各tdでクラスを切り替える必要がある可能性があります。このソリューションはまだ試していませんので、お知らせください。

その他の場合-これはIE8に固有であり、6または7ではありません。

編集

明らかに、-1で証明されているように、これを試していませんでした。私は（私の状況では）良い結果を出しました。

CSS

tr.hideme td {表示：なし}

JS

$("#view-advanced").click(function() {
    $("tr.hideme td").toggle();
    return false;
});
于 2009-06-10T12:44:02.430 に答える