div를 토글하는이 JQuery 코드는 IE7에서는 작동하지 않지만 다른 브라우저에서는 작동합니다.

Question

내 문제는 현대적인 브라우저에서 잘 작동하지만 IE7에서는 작동하지 않는 jquery 조각이 있습니다.

아이디어는 < A> 태그 중 하나를 클릭하면 "innerdetails"라는 div가 열립니다.

<ul class="table"> 
<li><a href="#">CLICK HERE</a></li> 
<li><a href="#">Techniques</a> </li> 
<li >3</li> 
<div class="innerdetails"> 
    Technical services, including MARC. 
</div> 
</ul> 

가 여기에 잘못된 jQuery 코드입니다 :

여기 내 HTML입니다.

$(document).ready(function() { 
    $("ul.table li a").click(function() { 
    $(this).parent("li").parent("ul").children(".innerdetails").toggle(); 
    alert ($(this).parent("li").parent("ul").children(".innerdetails").length) 
    return false; 
    }); 
}); 

흥미로운 것은 경고에, IE7은 .children에 대한 길이 (". 내부 코스 - 세부 사항")

크롬 반환 "1"

Answer 1

는 AS "0"을 반환한다는 것입니다 이 문제는 유효한 HTML이 아니기 때문에 발생합니다 (ul 태그에는 div 태그를 포함 할 수 없음). 따라서 IE7은 DOM 트리의 일부로 간주하지 않습니다.

는 li 태그의 div 내부를 넣어 (또는 대신 li 태그를 사용하여) li을 보내고 다음 .toggle(), 시도, 수정합니다.

Answer 2

나도 몰라 정확히 왜하지만 당신은 변경하면 그것은

$("ul.table li a").click(function() { 
    $(this).parent("li").parent("ul").find(".innerdetails").toggle(); 
    alert ($(this).parent("li").parent("ul").find(".innerdetails").length) 
    return false; 
}); 

그리고 jsfiddle http://jsfiddle.net/6heVt/2/

작동 children find에