jquery slideToggle在ContentPlaceHolder中不工作

我想使用'slideToggle（）'來顯示/隱藏一組控件。我在網絡上發現了這個代碼，並試圖讓它在測試應用程序中工作。當我將該腳本放在Content控件中並單擊該按鈕時，該網站似乎運行該腳本，因爲該應用程序繁忙了幾秒鐘。但是，當我嘗試調試JavaScript時，我無法在調試器中查看它。當我將該腳本放在Site.Master頁面的部分中時，我可以在調試器中看到代碼，但是當我單擊按鈕時它不會運行。jquery slideToggle在ContentPlaceHolder中不工作

這是我在的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>

使用此代碼，按鈕至少看起來像它正在調用腳本。

有人可以看到我在做什麼錯嗎？

謝謝！

更新的代碼 這個腳本會切換面板雖然是初步顯示出，我想它被隱藏intially，也是我想劇本，從頁面的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>

我添加了jQuery路徑中的Site.Master頁的部分中：

<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>

我怎樣才能得到該腳本從Site.Master頁面運行？

謝謝。

來源

2014-05-15 Gloria Santin

難道....你包括jQuery的在您的網站？打開瀏覽器控制檯，是否有任何錯誤？ – mituw16

我在項目的'腳本'文件夾中沒有特定版本的jquery。我認爲有'src'定義會做這項工作。我很抱歉這個基本問題，但...我不知道如何檢查瀏覽器控制檯中的錯誤。你是怎樣做的？ –

在所有主流瀏覽器中，按F12可以調出開發者控制檯。 – mituw16

試試下面的代碼：

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

來源

2014-05-19 16:39:22

它仍然不顯示Panel1。當我將該腳本放入Content控件中時，我得到了面板顯示和隱藏。但我寧願讓腳本在Site.Master頁面中工作，因爲那是我擁有其他javascript的地方。我將添加上面的更新代碼。 –

它工作時，我把它放在標籤。爲什麼它不在Content控件下工作？ –

jquery slideToggle在ContentPlaceHolder中不工作

回答

相關問題