사용자 정의 jQuery div 표시/숨기기 JS가 ASP.Net에서 작동하지 않습니다.

Question

스크립트 관리자와 Javascript/Jquery가 추가 된 마스터 페이지가 있습니다. 아래를 참조

<asp:ScriptManager ID="SM" runat="server" EnablePartialRendering="true"> 
    <Scripts> 
     <asp:ScriptReference Path="~/Scripts/jquery-1.7.2.min.js" ScriptMode="Release" /> 
     <asp:ScriptReference Path="~/Scripts/Custom.js" ScriptMode="Release" /> 
    </Scripts> 
</asp:ScriptManager> 

사용자 정의 JS를 :

$(".section").click(function() { 
    if ($(this).next(".sectiondetail").is(":hidden")) { 
     $(this).next(".sectiondetail").slideDown("slow"); 
     $(this).children('span').text('[-]'); 
} else { 
     $(this).next(".sectiondetail").slideUp("slow"); 
     $(this).children('span').text('[+]'); 
} 
}); 

내가 배치 한 내 마스터 페이지를 사용하여 콘텐츠를 페이지에 추가되어 내 ASCX 컨트롤의 HTML 다음

<div class="section"> 
    <span>[+]</span> General Information 
</div> 
<div class="sectiondetail" style="display: none;"> 
    Details go here. 
</div> 

JS 함수가 예상대로 작동하지 않습니다. 내 ASCX 컨트롤 페이지에서 JS 함수를 추가하면 예상대로 작동합니다. 여기서 뭐가 잘못 됐니?

감사합니다.

Answer 1

클릭 이벤트를 바인딩 할 때 CSS 컨트롤 section을 사용하여 html 컨트롤을 준비/렌더링하지 않았을 수 있습니다. On이 스크립트 블록 바인드 클릭 후 요소가 추가되거나 렌더링 된 경우에도 클릭 이벤트를 추가해야합니다.

$(".section").on("click", function() { 
    if ($(this).next(".sectiondetail").is(":hidden")) { 
     $(this).next(".sectiondetail").slideDown("slow"); 
     $(this).children('span').text('[-]'); 
} else { 
     $(this).next(".sectiondetail").slideUp("slow"); 
     $(this).children('span').text('[+]'); 
} 
}); 

또는 문서가 준비되면 이벤트를 바인딩 할 수 있습니다.

$(function(){ 
$(".section").click(function() { 
    if ($(this).next(".sectiondetail").is(":hidden")) { 
     $(this).next(".sectiondetail").slideDown("slow"); 
     $(this).children('span').text('[-]'); 
} else { 
     $(this).next(".sectiondetail").slideUp("slow"); 
     $(this).children('span').text('[+]'); 
} 
}); 
}); 

Answer 2

사용 style="visibility: hidden;" 대신 style="display: none;"

<div class="sectiondetail" style="visibility: hidden;"> 
    Details go here. 
</div> 

당신은 다음과 같은 코드를 사용하는 경우,

$(this).next(".sectiondetail").is(":hidden") 

또는 당신은 사용 할 수있다; . (". 섹션을") 현재 시나리오에서

$(this).next(".sectiondetail").css('display') == 'none' 

즉 style="display: none;"