Question

我有这个js小提琴，但我不知道如何在一个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>

感谢

Answer 1

没有必要担心你的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>

Answer 2

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

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

在此之后，你应该很好地使用它。包括css也是直截了当的。假设您的.css文件位于项目根目录的/ css文件夹中，就这样做：

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

希望我能提供帮助。

Answer 3

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

<!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手风琴html代码

3 个答案: