jQuery. Toggle () لا يعمل مع TRS في IE

Question

أنا أستخدم jQuery's Toggle () لإظهار / إخفاء صفوف الجدول. إنه يعمل بشكل جيد في فايرفوكس ولكنه لا يعمل في IE 8.

.show()/.hide() العمل بشكل جيد رغم ذلك.

slidetoggle () لا يعمل في IE أيضا - يظهر لانقسام ثانيا، ثم يختفي مرة أخرى. يعمل بشكل جيد في فايرفوكس.

بلدي 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>

جافا سكريبت

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

Answer 1

لقد واجهت هذا الخطأ نفسه على TR's في الجداول. قمت ببعض التحقيق باستخدام أداة تصحيح البرامج النصية IE8.

أولا حاولت استخدام تبديل:

$(classname).toggle();

هذا يعمل في FF ولكن ليس IE8.

ثم حاولت هذا:

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

عندما قمت بتصحيح هذا الرمز، اعتقد جيس دائما أنه كان مرئيا. لذلك سوف تغلقه ولكن بعد ذلك لن يفتحه أبدا.

ثم غيرت ذلك إلى هذا:

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

هذا يعمل بشكل جيد. JQuery's Got. حشرة في ذلك أو ربما بلدي HTML هو مزعج قليلا. في كلتا الحالتين، هذا ثابت مشكلتي.

Answer 2

الترقية إلى jQuery 1.4 إصلاحات هذا، بينما أنا في ذلك، فإن "الإصلاح" الوحيد في هذه الصفحة الذي عمل لي هو إجابة العجين الصبي:

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

Answer 3

إزالة الفترة من الخاص بك <tr class=".readOnlyRow"><td>row</td></tr>. وبعد بناء الجملة للحصول على تحديد فئة JQuery هو الإعداد له بفترة، ولكن لا تحتاج إلى ذلك في كود HTML الخاص بك.

Answer 4

لقد وجدت أنه في حين أن هذا لا يعمل في IE8

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

ولكن هذا يعمل:

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

حصلت على فكرة من الرابط jast نشر هنا من قبل

Answer 5

قمت بإصلاح هذه المشكلة عن طريق إخفاء الأطفال من عنصر TR.

toggleTr($(".toggletr"));

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

يبدو أن هذا موافق ل FF3.5 / FF3 / IE8 / IE7 / IE6 / Chrome / Safari.

Answer 6

فقط واجهت هذا نفسي - أسهل الحل الذي وجدته هو التحقق من:

:غير مخفي)

بدلاً من

:مرئي

ثم تصرف وفقا لذلك. وبعد

Answer 7

يبدو أن هذا تم إصلاحه في JQuery 1.4.

Answer 8

الجداول هي قطعة مثيرة للاهتمام من HTML، فهي لا تتبع القواعد الطبيعية كعناصر أخرى.

تعمل الجداول بشكل أساسي كجداول، وهناك قواعد خاصة للجداول ولكن لم يتم التعامل مع هذا بشكل صحيح في المتصفحات الأكبر سنا بسبب السفينة الدوارة من الجنون التي كانت حروب المتصفح.

في الأساس في جداول المتصفحات القديمة، كانت خصائص العرض ضئيلة وترك التدفق غير موثقل إلى حد كبير، لذا بدلا من تغيير القيم المحددة مسبقا لعلامة الجدول / TD / 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>

السبب في ذلك هو بحيث يتم استخدام فئة منفصلة لتبديل العرض، فلن يتم تغيير أي شيء على الطاولة، ولا تحتاج إلى تغيير خصائص الجداول، وعرضها وحفظ أي خصائص تخطيط ذات صلة حتى لو المتصفح لا يجعل هذا سهل وراء الكواليس.

Answer 9

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

هناك علة jQuery التي تسببها IE8 كل شيء لتقييمه. حاول أعلاه

Answer 10

كان لدي نفس المشكلة، لكنني وجدت حلوة لطيفة لجعل 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، والتي ستبدو منها غريبة (مرسومة بالانزلاق)، لكنها ستظل تعمل.

Answer 11

لقد لاحظت أن تبديل قد لا يعمل من أجل iPhone إذا كنت تشمل JQuery Mobile. إذا قمت بتشغيل التبديل (.Ready) قبل تحميل JQuery Mobile، فهي بخير.

Answer 12

لأنك تواجههم انقر فوق <a>, أنت بحاجة إلى وظيفة العودة false.

Answer 13

لقد لاحظت هذا كذلك. من المرجح أن تضطر إلى تبديل فئة على كل TD بدلا من ذلك. لم تجرب هذا الحل حتى الآن، لذلك اسمحوا لي أن أعرف!

للآخرين - هذا هو خاص ب IE8، وليس 6 أو 7.

تعديل

من الواضح أنك لم تحاول ذلك كما يتضح من -1، كما فعلت فقط مع النتائج الدقيقة (في وضعي).

CSS.

Tr.Hideme TD {عرض: لا شيء}

ج إس

$("#view-advanced").click(function() {
    $("tr.hideme td").toggle();
    return false;
});