Вопрос
I would like to use 'slideToggle()' to show/hide a set of controls. I found this code on the web and am trying to get it to work in a test application. When I put the script within the Content control and click the button, the web site seem to run the script because the application is busy for a couple of seconds. However, when I try to debug the javascript, I can't view it in the debugger. When I put the script in the section of the Site.Master page, I can see the code in the debugger but it does not run when I click the button.
This is my code in the Site.Master page: In the section it is as follows:
https://stackoverflow.com/questions/23683333
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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" />
This is the script within the Content control:
<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>
This is the markup on the site page:
<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>
Using this code, the button at least looks like it is calling the script.
Can anybody see what I am doing wrong?
Thanks!
Updated Code This script will toggle the panel although it is showing initially and I would like it to be hidden intially and also I would like the script to be run from the Site.Master page, if possible.
This is in the Default.aspx file:
<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>
I add the jquery path in the Site.Master page within the section:
<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
How can I get the script to run from Site.Master page?
Thanks.
Решение
Try the following code:
<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>
