我想使用“slideToggle()”来显示/隐藏一组控件。我在网上找到了这段代码，并试图让它在测试应用程序中运行。当我将脚本放在内容控件中并单击按钮时，网站似乎在运行脚本，因为应用程序忙了几秒钟。但是，当我尝试调试 javascript 时，无法在调试器中查看它。当我将脚本放在 Site.Master 页面的部分时，我可以在调试器中看到代码，但是当我单击按钮时它没有运行。
这是我在 Site.Master 页面中的代码: 部分内容如下:
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
这是内容控件中的脚本:
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent">
<script type="text/javascript">
$(document).ready(function () {
var Button1 = $("[id$='_Button1']");
var Button2 = $("[id$='_Button2']");
var Panel1 = $("[id$='_Panel1']");
Button1.click(function (e) {
Panel1.slideDown();
e.preventDefault();
});
Button2.click(function (e) {
Panel1.slideUp();
e.preventDefault();
});
});
</script>
</asp:ContentPlaceHolder>
</section>
</div>
这是网站页面上的标记:
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<asp:Button ID="Button1" runat="server" Text="Show Panel" />
<asp:Button ID="Button2" runat="server" Text="Hide Panel" />
<br /><br />
<asp:Panel runat="server" ID="Panel1" Height="185px" Width="320px" style="display:none;" BackColor="#FFFF99" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">
Hello World!
</asp:Panel>
</asp:Content>
使用这段代码，按钮至少看起来像是在调用脚本。
谁能看出我做错了什么？
谢谢!
更新代码 该脚本将切换面板，尽管它最初显示，我希望它最初被隐藏，而且如果可能的话，我希望脚本从 Site.Master 页面运行。
这是在 Default.aspx 文件中:
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<script type="text/javascript">
$(function () {
$("#<%=Button1.ClientID %>").click(function (evt) {
evt.preventDefault();
$("#<%=Panel1.ClientID %>").slideToggle('slow');
});
});
</script>
<asp:Button ID="Button1" runat="server" Width="200px" Text="Show Panel" OnClick="Button1_Click" />
<asp:Panel ID="Panel1" runat="server">
This is within the Panel.
</asp:Panel>
我在该部分的 Site.Master 页面中添加 jquery 路径:
<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
如何让脚本从 Site.Master 页面运行？
谢谢。
最佳答案
试试下面的代码:
<script type="text/javascript">
$(document).ready(function () {
$("[id$=Button1]").on("click",function (e) {
$("[id$=Panel1]").slideDown();
return false;
});
$("[id$=Button2]").on("click",function (e) {
$("[id$=Panel1]").slideUp();
return false;
});
});
</script>
关于javascript - jquery slideToggle 在 ContentPlaceHolder 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23683333/