我有一个FAQ页面，里面有一个jQuery Accordion和一个转发器控件，可以显示各种问题和答案。 FAQ页面有一个名为LaunchPage.Master的主页。
以下是我的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>
当我查看FAQ页面时，我没有收到手风琴。相反，我只得到文本。 jQueryUI.js和.CSS链接工作正常。我试图将我的脚本和css链接引用更改为头部下方的主页以及FAQ页面。但是我得到的是与文本相同的输出而不是手风琴。
我尝试根据这些链接中提供的响应进行故障排除，但是没有任何效果。
jQuery accordion its not working
jQuery accordion() not working
我无法找到问题的根本原因。当我检查代码时，jQuery没有被检测到并加载到dvAccordion控件。任何帮助都非常感谢。
答案 0 :(得分：2)
我发现这段代码可以替代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>