jquery - jquery手风琴html代码

Question

我有这个 js fiddle，但我不知道如何在 html 文档中完整地编写它，以便它会像它应该的那样显示出来。有 html 方面、javascript 方面、jquery 方面和 css 部分。它只是让我感到困惑。谁能帮忙？

<h1>Toggle Panels</h1>
<div id="notaccordion">
  <h3><a href="#">Section 1</a></h3>
  <div>
    <p>
    Mauris mauris  ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus  nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a  nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur  malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula.  Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet,  mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo.  Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3><a href="#">Section 3</a></h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac,  risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede.  Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed  commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo  purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item  three</li>
    </ul>
  </div>
  <h3><a href="#">Section 4</a></h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique  senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante  ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae;  Aenean lacinia
    mauris vel est.
    </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>

谢谢

score 0 · Accepted Answer

无需担心您拥有的 jQuery 代码。

这里使用jQuery UI Accordion非常简化了手风琴。

$('#notaccordion').accordion();  //This is enough to play with jQuery accordion

您应该添加参考：

jQuery UI CSS：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

jQuery.js：

<script src="http://code.jquery.com/jquery-1.9.1.js"/>

jQueryUI.js：

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/>

通过这个JSFiddle

离线应该看起来像

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/>
<script>
$('#notaccordion').accordion();
</script>
</head>
<body>
<!-- Place your HTML Code-->
</body>
</html>

score 0 · Accepted Answer

您只需将 JS 放入一个 .js 文件并将其保存在您的项目中。之后，您只需将其包含在您的 .html 文件中。假设您的 .js 文件位于项目根目录的 /js 文件夹中，您可以将它包含在和之间：

<script src="./js/file.js"></script>

在此之后，您应该可以很好地使用它。包括 css 也很简单。只需这样做，假设您的 .css 文件位于项目根目录的 /css 文件夹中：

<link href="./css/file.css" rel="stylesheet">

希望我能帮上忙。

score 0 · Accepted Answer

把所有东西放在一起......你会得到这个

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(window).load(function () {
        $.fn.togglepanels = function(){
          return this.each(function(){
            $(this).addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
          .find("h3")
            .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
            .hover(function() { $(this).toggleClass("ui-state-hover"); })
            .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
            .click(function() {
              $(this)
                .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
                .next().slideToggle();
              return false;
            })
            .next()
              .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
              .hide();
          });
        };

        $("#notaccordion").togglepanels();
    });
    </script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
</head>

<body>
    <h1>Toggle Panels</h1>
    <div id="notaccordion">
      <h3><a href="#">Section 1</a></h3>
      <div>
        <p>
        Mauris mauris  ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus  nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a  nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur  malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
      </div>
      <h3><a href="#">Section 2</a></h3>
      <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula.  Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet,  mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo.  Vivamus non quam. In
        suscipit faucibus urna.
        </p>
      </div>
      <h3><a href="#">Section 3</a></h3>
      <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac,  risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede.  Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed  commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo  purus venenatis dui.
        </p>
        <ul>
          <li>List item one</li>
          <li>List item two</li>
          <li>List item  three</li>
        </ul>
      </div>
      <h3><a href="#">Section 4</a></h3>
      <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique  senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante  ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae;  Aenean lacinia
        mauris vel est.
        </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>                                                                                                                      
</body>
</html>

只需将上面的代码粘贴到记事本中并将其保存为 index.html .. 你已经准备好了。

享受

jquery - jquery手风琴html代码

3 回答 3

Related

Reference