Question

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

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>

Answer 1

请尝试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>

希望它对你有所帮助。感谢

当我使用Metro UI-CSS时，手风琴无效

1 个答案: