个人中心
gpt4 book ai didi

jQuery Accordion 未显示

转载 作者：太空宇宙 更新时间：2023-11-03 23:06:43 25 4
gpt4 key购买 nike

我有一个 FAQ 页面，其中有一个 jQuery Accordion 和 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 页面时，我没有看到 Accordion 。相反，我只得到文本。 jQueryUI.js 和 .CSS 链接工作正常。我试图将我的脚本和 css 链接引用更改为在标题下以及我的常见问题解答页面中对我的母版页的引用。但是，我得到的输出与文本相同，而不是 Accordion 。

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

jQuery Accordion not working

jQuery accordion its not working

jQuery accordion() not working

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

最佳答案

我发现这段代码可以替代 jquery accordion。 

<!-- 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 Accordion 未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34496967/

25 4 0
文章推荐： css - React Radium - 如何动态更改属性值
文章推荐： node.js - Sails js::测试传递给 View 的变量
文章推荐： node.js - Mongoose:嵌套数组结构中的聚合查询
文章推荐： html - 我可以在移动设备上隐藏图片而不是 div 或类吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com