Question

我想使用＆＃39; slideToggle（）＆＃39;显示/隐藏一组控件。我在网上找到了这个代码，并试图让它在测试应用程序中运行。当我将脚本放在Content控件中并单击按钮时，网站似乎运行脚本，因为应用程序忙了几秒钟。但是，当我尝试调试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页面运行？

感谢。

Answer 1

请尝试以下代码：

  <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>

jquery slideToggle在ContentPlaceHolder中无法正常工作

1 个答案: