自定義jQuery顯示/隱藏div JS不能在ASP.Net工作

我有一個母版頁，其中添加了腳本管理器和Javascript/Jquery。請看下圖：自定義jQuery顯示/隱藏div JS不能在ASP.Net工作

<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函數，它按預期工作。這裏有什麼問題？

謝謝。

來源

2012-07-09 Muhammad Usman

嘗試用活$（ '點擊'，函數（）{...}）（「節」）。 – 2012-07-09 04:52:45

您綁定單擊事件的時間您可能沒有準備好/使用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('[+]'); 
} 
}); 
});

來源

2012-07-09 04:53:14 Adil

感謝您的幫助球員。現在工作正常。 – 2012-07-09 05:16:39

不客氣。 – Adil 2012-07-09 05:20:17

使用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;"

來源

2012-07-09 05:00:48

自定義jQuery顯示/隱藏div JS不能在ASP.Net工作

回答

相關問題