jQuery .Toggle () IE에서 TRS와 작동하지 않습니다.

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

  •  13-09-2019
  •  | 
  •  

문제

jQuery 's 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>

자바 스크립트

$(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가 있습니다 버그 그것에 또는 아마도 내 html은 약간 나사입니다. 어느 쪽이든, 이것은 내 문제를 해결했습니다.

다른 팁

jQuery 1.4로 업그레이드하는 것은 이것을 수정하지만, 나는 그것에 있지만,이 페이지의 유일한 "수정"은 Dough Boy의 대답이었습니다.

$(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 조각이며 다른 요소와 같이 일반적인 규칙을 따르지 않습니다.

기본적으로 테이블은 테이블로 표시되며 테이블에 대한 특별 규칙이 있지만 브라우저 전쟁이었던 Craziness의 롤러 코스터로 인해 오래된 브라우저에서는 제대로 처리되지 않았습니다.

기본적으로 구형 브라우저에서 테이블 디스플레이 속성이 최소화되었고 흐름이 문서화되지 않은 상태로 남아있어 테이블/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이 모든 것을 평가하게하는 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을 포함하면 토글이 iPhone에서 작동하지 않을 수 있음을 알았습니다. JQuery Mobile이로드되기 전에 토글 (.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