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>

自定义 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 函数，它会按预期工作。这里有什么问题？

谢谢。

4

2 回答 2

2

当您绑定点击事件时，您可能没有准备好/使用 css 渲染的 html 控件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 回答