Question

再次遇到jQuery问题 - 这一次，我需要一个可折叠的手风琴来导航。

当我点击“工作”时，我希望列表打开。我目前正在使用示例here中使用的相同jquery。

现在，我只是想让它发挥作用...但我希望它默认折叠，以便它可以打开。不知道该怎么做。

HTML

<ul class="accordion">
<li><a href="#"><h1>work</h1></a></li>
  <ul class="nav">
    <li><a href="#section1"><p class="nav_p">anatomy of type</p></a></li>
    <li><a href="#section2"><p>clash album redesign</p></a></li>
    <li><a href="#section3"><p>"ghost" book jacket</p></a></li>
    <li><a href="#section4"><p>charlie chaplin</p></a></li>
    <li><a href="#section5"><p>design influence</p></a></li>
    <li><a href="#section6"><p>"thrift thoughts" zine</p></a></li>
    <li><a href="#section7"><p>cigarette card illustration</p></a></li>
    <li><a href="#section8"><p>"frosty" winecooler packaging</p></a></li>
  </ul>

<li><a href="#"><h1>about</h1></a></li>

<li><a href="#"><h1>contact</h1></a></li>
</ul>

jQuery

$(function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  });

任何和所有的帮助表示赞赏！

Answer 1

首先你的选择器$（“＃accordion”）是错误的。应该是$（“。accordion”）

Answer 2

http://jsfiddle.net/bG52W/3/

即使您的所有代码都是正确的。它本来就不会在jfiddle中起作用。你没有检查左边的jQuery UI。

除此之外你的结构有点不对劲：

您的手风琴容器的标记需要成对的标题和内容小组：

http://api.jqueryui.com/accordion

<div class="accordion">
<h1><a href="#">work</a></h1>
  <div class="nav">
      <ul>
    <li><a href="#section1"><p class="nav_p">anatomy of type</p></a></li>
    <li><a href="#section2"><p>clash album redesign</p></a></li>
    <li><a href="#section3"><p>"ghost" book jacket</p></a></li>
    <li><a href="#section4"><p>charlie chaplin</p></a></li>
    <li><a href="#section5"><p>design influence</p></a></li>
    <li><a href="#section6"><p>"thrift thoughts" zine</p></a></li>
    <li><a href="#section7"><p>cigarette card illustration</p></a></li>
    <li><a href="#section8"><p>"frosty" winecooler packaging</p></a></li>
      </ul>
  </div>
<h1><a href="#">about</a></h1>
  <div><a href="#"><h1>about</h1></a></div>
<h1><a href="#">contact</a></h1>
  <div><a href="#"><h1>contact</h1></a></div>
</div>

也像声音说的那样，你的选择器错了。

$(function () {
    $(".accordion").accordion({
        collapsible: true
    });
});

jQuery UI手风琴的麻烦（可折叠）

2 个答案: