jQuery 手风琴未显示

Question

我有一个 FAQ 页面，其中有一个 jQuery 手风琴和手风琴内的转发器控件，可以显示各种问题和答案。 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>

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

我尝试根据这些 link 中提供的响应进行故障排除，但没有任何效果。

jQuery Accordion not working

jQuery accordion its not working

jQuery accordion() not working

我找不到问题的根本原因。当我检查代码时，jQuery 没有被检测到并加载到 dvAccordion 控件中。非常感谢任何帮助。

Answer 1

我发现此代码可以替代 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>

jQuery 手风琴未显示

jQuery Accordion not getting displayed

css

asp.net

jquery

jquery-ui-accordion