jQuery Accordion没有显示

我有一个FAQ页面，它有一个jQuery Accordion和一个手风琴里面的中继器控件，它将显示各种问题和答案。 FAQ页面有一个名为LaunchPage.Master的主页面。jQuery Accordion没有显示

下面是我LaunchPage.Master代码

<html> 
 

 
<head runat="server"> 
 
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" /> 
 
    <!-- Bootstrap 3.3.4 --> 
 
    <link href="content/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <link href="content/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
 
    <!-- Theme style --> 
 
    <link href="content/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> 
 
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> 
 
    </asp:ContentPlaceHolder> 
 
    <asp:ContentPlaceHolder ID="head" runat="server"> 
 
    </asp:ContentPlaceHolder> 
 
    <script defer="defer" type="text/javascript" src="Content/js/jQuery/jQuery_1_7_2.min.js"></script> 
 
</head> 
 

 
<body class="skin-blue-light sidebar-mini"> 
 
    <div class="wrapper"> 
 
    <header class="main-header"> 
 
     <!-- Logo --> 
 
     <a href="#" class="logo"> 
 
     <!-- mini logo for sidebar mini 50x50 pixels --> 
 
     <span class="logo-mini"> </span> 
 
     <!-- logo for regular state and mobile devices --> 
 
     </a> 
 
     <!-- Header Navbar: style can be found in header.less --> 
 
     <nav class="navbar navbar-static-top" role="navigation"> 
 
     <!-- Sidebar toggle button--> 
 
     <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" title="Toggle Full Frame"></a> 
 
     <!-- Navbar Right Menu --> 
 
     <div class="navbar-custom-menu"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="dropdown user user-menu"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
 
       <span class="hidden-xs"> 
 
              <asp:Label ID="lftSideLabel" runat="server" CssClass="info" /> 
 
             </span> 
 
       </a> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="dropdown notifications-menu"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="SettingsIcon" title="Settings" runat="server"> 
 
       <i class="glyphicon glyphicon-cog" title="Settings"></i> 
 
       </a> 
 
       <ul class="dropdown-menu"> 
 
       <li class="header">Settings</li> 
 
       <li> 
 
        <!-- inner menu: contains the actual data --> 
 
        <ul class="menu"> 
 
        <li id="nUser" runat="server"> 
 
         <a href="Register.aspx" id="RegisterOption"> 
 
         <i class="fa fa-user-plus text-aqua"></i>Create New User 
 
         </a> 
 
        </li> 
 
        <li id="cPassword" runat="server"> 
 
         <a href="changepassword.aspx" id="ChangePasswordOption"> 
 
         <i class="fa fa-pencil text-red"></i>Change Password 
 
         </a> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
       <ul class="nav navbar-nav"> 
 
       <li class="dropdown user user-menu"> 
 
        <a href="LogoutPage.aspx" class="dropdown-toggle" title="Logout" ID="Signout"> 
 
        <i class="glyphicon glyphicon-log-out" title="Logout"></i> 
 
        </a> 
 
       </li> 
 
       </ul> 
 
     </div> 
 
     </nav> 
 
    </header> 
 
    <!-- Left side column. contains the logo and sidebar --> 
 
    <aside class="main-sidebar"> 
 
     <!-- sidebar: style can be found in sidebar.less --> 
 
     <section class="sidebar"> 
 
     <!-- Sidebar user panel --> 
 
     <!-- sidebar menu: : style can be found in sidebar.less --> 
 
     <ul class="sidebar-menu"> 
 
     </ul> 
 
     </section> 
 
     <!-- /.sidebar --> 
 
    </aside> 
 
    <!-- Content Wrapper. Contains page content --> 
 
    <div class="content-wrapper"> 
 
     <!-- Main content --> 
 
     <section class="content"> 
 
     <form id="form1" runat="server"> 
 
      <asp:ScriptManager ID="ScriptManager1" runat="server"> 
 
      </asp:ScriptManager> 
 
      <div> 
 
      <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
 
      </asp:ContentPlaceHolder> 
 
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
 
      </asp:ContentPlaceHolder> 
 
      </div> 
 
     </form> 
 
     </section> 
 
     <!-- /.content --> 
 
    </div> 
 
    <!-- /.content-wrapper --> 
 
    <footer class="main-footer"> 
 
    </div> 
 
    <!-- ./wrapper --> 
 
</body> 
 
<script defer="defer" type="text/javascript"> 
 
    //Auto redirect to login page 
 
    function SessionExpireAlert(a) { 
 
    setTimeout(function() { 
 
     window.location = "Login.aspx" 
 
    }, a) 
 
    }; 
 
</script> 
 
<script defer="defer" type="text/javascript"> 
 
    $("[id*=Signout]").live("click", function() { 
 
    $.ajax({ 
 
     type: "POST", 
 
     contentType: "application/json; charset=utf-8", 
 
     url: "Landing.aspx/LogoutIcon", 
 
     data: "{}", 
 
     dataType: "json", 
 
     success: function(a) {}, 
 
     error: function(a) { 
 
     alert("Error") 
 
     } 
 
    }) 
 
    }); 
 
</script> 
 
<script defer="defer" type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $("#content").find("[id^='tab']").hide(); 
 
    $("#tabs li:first").attr("id", "current"); 
 
    $("#content #tab1").fadeIn(); 
 
    $("#tabs a").click(function(a) { 
 
     a.preventDefault(); 
 
     "current" != $(this).closest("li").attr("id") && ($("#content").find("[id^='tab']").hide(), $("#tabs li").attr("id", ""), $(this).parent().attr("id", "current"), $("#" + $(this).attr("name")).fadeIn()) 
 
    }) 
 
    }); 
 
</script> 
 
<!-- jQuery 2.1.4 --> 
 
<script defer="defer" src="Content/js/jQuery/jQuery-2.1.4.min.js"></script> 
 
<!-- Bootstrap 3.3.2 JS --> 
 
<script defer="defer" src="Content/js/bootstrap.min.js" type="text/javascript"></script> 
 
<!-- AdminLTE App --> 
 
<script defer="defer" src="Content/js/AdminApp/app.min.js" type="text/javascript"></script> 
 

 
</html>

这是我的FAQ.aspx代码

<%@ Page Title="" Language="C#" MasterPageFile="~/LaunchPage.master" AutoEventWireup="true" CodeFile="FAQ.aspx.cs" Inherits="FAQ" %> 
 

 
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> 
 

 
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> 
 
    </asp:Content> 
 
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server"> 
 
    </asp:Content> 
 
    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 
 

 
     <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"> 
 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
     <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
 
     <script> 
 
     $(document).ready(function() { 
 
      $("#ContentPlaceHolder1_dvAccordian").accordion({ 
 
      active: false, 
 
      collapsible: true, 
 
      heightStyle: "content", 
 
      alwaysOpen: false 
 
      }); 
 
     }); 
 
     </script> 
 
     <div> 
 
     <div> 
 
      <div class="wrapper row-offcanvas row-offcanvas-left"> 
 
      <section class="content-header"> 
 
      </section> 
 
      <div id="dvAccordian" style="width: 99%" runat="server"> 
 
       <asp:Repeater ID="rptFAQ" runat="server"> 
 
       <ItemTemplate> 
 
        <div class="s_panel" style="font-family: 'Roboto'; font-size: small"> 
 
        <h1> 
 
             <a href="#" class="lblFontSmall" data-content="Tool tip"><%# Eval("Question") %></a> 
 
            </h1> 
 
        <div> 
 
         <p> 
 
         <small><span class="lblFontSmall"><%# Eval("Answer") %></span></small> 
 
         </p> 
 
        </div> 
 
        </div> 
 
       </ItemTemplate> 
 
       </asp:Repeater> 
 
      </div> 
 

 
      <br /> 
 
      <br /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </asp:Content>

当我查看常见问题解答页面，我没有得到手风琴。相反，我只获取文本。 jQueryUI.js和.CSS链接工作正常。我试图将我的脚本和CSS链接引用更改为我的母版页以及我的FAQ页面。但是我得到的是与文本相同的输出而不是手风琴。

我试图根据这些链接中提供的响应进行故障排除，但没有任何工作。

jQuery Accordion not working

jQuery accordion its not working

jQuery accordion() not working

我无法找到问题的根源。当我检查代码时，jQuery没有被检测到并加载到dvAccordion控件。任何帮助，高度赞赏。

来源

2015-12-28 Karthik Venkatraman

我看到有已经为这个职位一个downvote。我不知道为什么这个用户降低了我的内容。 downvoted的人可以告诉我相同的原因吗？如果发布帖子的人没有尝试过任何事情，他可能会被降级。或者它不清楚。我已经尝试了所有的解决方法，并且我不能把所有我尝试过的帖子都放到这个帖子中，因为它不会给出我的问题的清晰画面。所以只有我大体上说过：“我试图将我的脚本和CSS链接引用更改为我的母版页以及我的常见问题页面。”此外，我的活动是一个项目。 –

我发现这个代码作为jQuery手风琴的替代品。

<!-- JS --> 
 
< script type = "text/javascript" > 
 
    $(document).ready(function($) { 
 
    $('#accordion').find('.accordion-toggle').click(function() { 
 

 
     //Expand or collapse this panel 
 
     $(this).next().slideToggle('fast'); 
 

 
     //Hide the other panels 
 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 
 

 
    }); 
 
    }); < /script>

<style> .accordion-toggle { 
 
    cursor: pointer; 
 
} 
 
.accordion-content { 
 
    display: none; 
 
} 
 
.accordion-content.default { 
 
    display: block; 
 
} 
 
</style>

<div id="accordion"> 
 
    <h4 class="accordion-toggle">Accordion 1</h4> 
 
    <div class="accordion-content default"> 
 
    <p>Cras malesuada ultrices augue molestie risus.</p> 
 
    </div> 
 
    <h4 class="accordion-toggle">Accordion 2</h4> 
 
    <div class="accordion-content"> 
 
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
 
    </div> 
 
    <h4 class="accordion-toggle">Accordion 3</h4> 
 
    <div class="accordion-content"> 
 
    <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
 
    </div> 
 
</div>

来源

2015-12-29 09:20:16

回答

相关问题