自定义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工作

回答

相关问题