0

スクリプト マネージャーと 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>

カスタム J:

$(".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 関数を追加すると、期待どおりに動作します。ここで何が問題なのですか？

ありがとう。

4

2 に答える 2

2

クリック イベントをバインドしているときに、html コントロールが css で準備/レンダリングされていない可能性がありますsection。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-09T04:53:14.143 に答える
1

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-09T05:00:48.873 に答える