当我使用Metro UI-CSS时，手风琴不起作用

我正在构建一个看起来像windows8模式的Web应用程序，所以我使用MetroUI-CSS搜索并找到，您可以在其中设置样式来创建站点具有类似于Windows 8的界面。我是新手在我的应用程序中，首先我需要手风琴，所以我阅读了手册并将其应用于我的应用程序中，但不知何故手风琴不起作用，手风琴的内容没有打开.

i am new in "MetroUI-CSS",so i don't know why Accordion is not opening...?
please help me to fix it..
Thanks In advance 
i am pasting my code here
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExamStartPage.aspx.cs" Inherits="Project_Irshad.ExamStartPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet" />
    <link href="css/metro-bootstrap.css" rel="stylesheet" />
    <script src="js/js/jquery.easing.1.3.min.js"></script>
    <script src="js/js/jquery.min.js"></script>
    <script src="js/metro/metro-accordion.js"></script>
    <title>ExamStart</title>
    <style>
        .main {
            width: 100%;
        }
        .left_content {
            width: 30%;
            float: left;
        }
        .Right_Content {
            width: 70%;
            float: right;
        }
    </style>
    <script type="text/javascript">
    </script>
</head>
<body class="metro">
    <form id="form1" runat="server">
        <div class="main">
            <div class="left_content">
                <div class="accordion" data-role="accordion">
                    <div class="accordion-frame">
                        <a href="#" class="heading">Section 1</a>
                        <div class="content">
                            <a>Hello Every One...</a>
                        </div>
                    </div>
                    <div class="accordion-frame">
                        <a href="#" class="heading">Section 1</a>
                        <div class="content">
                            <a>Hello Every One in section 2</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Right_Content">
            </div>
        </div>
    </form>
</body>
</html>

请尝试 JQuery 手风琴。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ExamStart</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>
<form id="form1" runat="server">
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Hello Every One Section 1...
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Hello Every One Section 2...
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Hello Every One Section 3...
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Hello Every One Section 4...
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>
</form> 
</body>
</html>

希望对您有所帮助。谢谢

相关内容

最新更新

热门标签：