主页 / 问题 / 635480
Accepted
Rumata
Asked:2020-03-05 02:59:15 +0000 UTC2020-03-05 02:59:15 +0000 UTC

为什么 jQuery UI 手风琴不起作用？

  • 772

我正在学习JS。我正在尝试使用 jQuery UI 制作手风琴。由于某种原因它不起作用，很长一段时间我一直在试图理解为什么，可能是怎么回事？非常感谢！

$(function() {
  $("#accordion").accordion();
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Timer</title>


</head>

<body>
  <div id="accordion">
    <h1><a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>

    <h3><a href=#>Nulla non eleifend magna. Proin luctus ante ac felis blandit vestibulum.</a></h3>
    <div id="first">
      <p>Suspendisse potenti. Donec non venenatis lectus, sagittis faucibus est. Pellentesque lacinia ut odio nec semper. Maecenas eros massa, tristique ut nunc eget, fermentum tempor sapien. Vestibulum arcu leo, condimentum ut augue non, dapibus scelerisque
        dolor. Pellentesque pellentesque eget nisi at elementum. Etiam eu ante lacus. Etiam lacinia malesuada nisi a ullamcorper. Sed faucibus imperdiet elit, sed posuere tortor porttitor at. Curabitur nisi ante, rhoncus ut est nec, euismod elementum
        elit. Maecenas at condimentum lorem, ac posuere velit.</p>
    </div>

    <h3><a href=#>In dignissim, dui non euismod dictum, dolor dolor accumsan arcu, vel ornare elit velit at leo.</a></h3>
    <div>
      <p>Curabitur aliquam tellus non metus luctus, ac mattis lectus vehicula. Duis gravida facilisis sapien, facilisis sodales enim semper ut. Curabitur porta magna eu metus posuere, rutrum eleifend nulla imperdiet. Suspendisse a dui blandit, mattis augue
        et, ultricies diam. Phasellus tincidunt dui et orci bibendum, sit amet mollis nunc convallis. Duis ac ullamcorper tellus, a viverra ante.</p>
    </div>

    <h3><a href=#>Cras tincidunt leo non quam efficitur, eget scelerisque tortor tempor.</a></h3>
    <div>
      <p>Quisque elementum augue ac feugiat sodales. Nam auctor libero at semper aliquet. Nam convallis est nec nisl aliquet bibendum. Sed volutpat sed nisl nec laoreet. Donec dignissim felis a ipsum pellentesque ultrices. Integer vulputate tristique lectus
        quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tempor nisl ipsum, at vestibulum nulla sagittis vitae. Phasellus at nunc ut odio dictum faucibus.</p>
    </div>

    <h3><a href=#>Ut ex nisl, ultrices vel sagittis bibendum, mollis efficitur ipsum.</a></h3>
    <div>
      <p>Aenean vitae lorem libero. Suspendisse venenatis, libero viverra aliquet facilisis, dui diam egestas nibh, at luctus augue est sit amet lorem. Phasellus non turpis vulputate, lacinia erat et, condimentum lorem. Curabitur ipsum sapien, interdum eget
        tincidunt at, placerat sed tellus. Nam purus orci, facilisis egestas porta sed, tempor id justo. Fusce elementum, diam sed fringilla congue, erat lectus pharetra purus, et ornare risus velit sit amet risus. Proin eu lorem odio. Nullam eu condimentum
        nibh.
      </p>
    </div>

    <h3><a href=#>Praesent quis lacus posuere, viverra velit eu, vulputate velit. Aliquam sed condimentum nisi.</a></h3>
    <div>
      <p>Vivamus dapibus tempor purus. Vivamus et sem id dui placerat elementum. Nunc tristique, lacus quis suscipit gravida, lacus nisi commodo magna, vitae tincidunt metus ex eu sem. Pellentesque et lobortis nunc, eget mattis nisl. Ut feugiat urna ac fringilla
        dictum. Mauris viverra hendrerit felis, sit amet convallis orci consectetur eu.</p>
    </div>

  </div>


  <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> -->


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</body>

</html>

javascript

1 个回答

  1. Best Answer

    删除h1。它认为它应该隐藏/显示h3，而不是div

    $(function() {
  $("#accordion").accordion();
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="accordion">
  <h3><a href=#>Nulla non eleifend magna. Proin luctus ante ac felis blandit vestibulum.</a></h3>
  <div id="first">
    <p>Suspendisse potenti. Donec non venenatis lectus, sagittis faucibus est. Pellentesque lacinia ut odio nec semper. Maecenas eros massa, tristique ut nunc eget, fermentum tempor sapien. Vestibulum arcu leo, condimentum ut augue non, dapibus scelerisque
      dolor. Pellentesque pellentesque eget nisi at elementum. Etiam eu ante lacus. Etiam lacinia malesuada nisi a ullamcorper. Sed faucibus imperdiet elit, sed posuere tortor porttitor at. Curabitur nisi ante, rhoncus ut est nec, euismod elementum elit.
      Maecenas at condimentum lorem, ac posuere velit.</p>
  </div>

  <h3><a href=#>In dignissim, dui non euismod dictum, dolor dolor accumsan arcu, vel ornare elit velit at leo.</a></h3>
  <div>
    <p>Curabitur aliquam tellus non metus luctus, ac mattis lectus vehicula. Duis gravida facilisis sapien, facilisis sodales enim semper ut. Curabitur porta magna eu metus posuere, rutrum eleifend nulla imperdiet. Suspendisse a dui blandit, mattis augue
      et, ultricies diam. Phasellus tincidunt dui et orci bibendum, sit amet mollis nunc convallis. Duis ac ullamcorper tellus, a viverra ante.</p>
  </div>

  <h3><a href=#>Cras tincidunt leo non quam efficitur, eget scelerisque tortor tempor.</a></h3>
  <div>
    <p>Quisque elementum augue ac feugiat sodales. Nam auctor libero at semper aliquet. Nam convallis est nec nisl aliquet bibendum. Sed volutpat sed nisl nec laoreet. Donec dignissim felis a ipsum pellentesque ultrices. Integer vulputate tristique lectus
      quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tempor nisl ipsum, at vestibulum nulla sagittis vitae. Phasellus at nunc ut odio dictum faucibus.</p>
  </div>

  <h3><a href=#>Ut ex nisl, ultrices vel sagittis bibendum, mollis efficitur ipsum.</a></h3>
  <div>
    <p>Aenean vitae lorem libero. Suspendisse venenatis, libero viverra aliquet facilisis, dui diam egestas nibh, at luctus augue est sit amet lorem. Phasellus non turpis vulputate, lacinia erat et, condimentum lorem. Curabitur ipsum sapien, interdum eget
      tincidunt at, placerat sed tellus. Nam purus orci, facilisis egestas porta sed, tempor id justo. Fusce elementum, diam sed fringilla congue, erat lectus pharetra purus, et ornare risus velit sit amet risus. Proin eu lorem odio. Nullam eu condimentum
      nibh.
    </p>
  </div>

  <h3><a href=#>Praesent quis lacus posuere, viverra velit eu, vulputate velit. Aliquam sed condimentum nisi.</a></h3>
  <div>
    <p>Vivamus dapibus tempor purus. Vivamus et sem id dui placerat elementum. Nunc tristique, lacus quis suscipit gravida, lacus nisi commodo magna, vitae tincidunt metus ex eu sem. Pellentesque et lobortis nunc, eget mattis nisl. Ut feugiat urna ac fringilla
      dictum. Mauris viverra hendrerit felis, sit amet convallis orci consectetur eu.</p>
  </div>

</div>


<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> -->


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

    • 1

相关问题