jQuery .Toggle（）IEでTRSで動作していない

StackOverflow https://stackoverflow.com/questions/975153

  •  13-09-2019
  •  | 
  •  

質問

JQueryのToggle（）を使用して、テーブルの行を表示/非表示にしています。 Firefoxでは正常に動作しますが、IE 8では機能しません。

.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();  
    });  
});
役に立ちましたか？

解決

テーブルの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's got バグ その中で、あるいは多分私のHTMLは少し厄介です。いずれにせよ、これは私の問題を修正しました。

他のヒント

jquery 1.4にアップグレードするとこれが修正されますが、私はそれに取り組んでいますが、私のために働いたこのページの唯一の「修正」は、生地の少年の答えでした。

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

あなたから期間を削除します <tr class=".readOnlyRow"><td>row</td></tr>. 。 jQueryクラスの選択の構文は、期間でそれを準備することですが、HTMLコードでは必要ありません。

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

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

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

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

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

TR要素の子供を隠すことにより、この問題を修正しました。

toggleTr($(".toggletr"));

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

これは、FF3.5/FF3/IE8/IE7/IE6/CHROME/SAFARIでは問題ないようです。

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

：隠されていない）

それ以外の

：見える

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

これはjQuery 1.4で修正されているようです。

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

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

基本的に古いブラウザでテーブル表示プロパティは最小限であり、フローはほとんど文書化されていないため、テーブル/TR/TDタグの事前定義値を変更する代わりに、代わりに次のクラスを追加して削除し、クラス自体をオンとオフに切り替えるのが最善ですテーブル/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>

この理由は、ディスプレイを切り替えるために使用される別のクラスであるため、テーブル自体の何も変更されていないことも、テーブルプロパティを変更する必要も、表示する必要もありません。ブラウザは舞台裏でそれほど簡単になりません。

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

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

私は同じ問題を抱えていましたが、私は作るべき素晴らしい回避策を見つけました 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は奇妙に見えます（めちゃくちゃスライド）が機能しますが、それでも機能します。

JQuery Mobileを含めると、ToggleがiPhoneで機能しない可能性があることに気付きました。 jQueryモバイルがロードされる前にトグル（.ready）を実行すると、その問題はありません。

あなたがそれらをクリックしているからです <a>, 、falseを返す機能が必要です。

私もこれに気づきました。代わりに、各TDのクラスを切り替える必要がある可能性があります。まだこの解決策を試していないので、お知らせください！

他の場合 - これは6または7ではなくIE8に固有です。

編集

私がちょうど（私の状況では）素晴らしい結果でやったので、明らかにあなたは-1から証明されたようにこれを試しませんでした。

CSS

tr.hideme td {display：none}

JS

$("#view-advanced").click(function() {
    $("tr.hideme td").toggle();
    return false;
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top