0

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

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

现在，我只是想让它工作......但我希望它默认为折叠，以便它可以打开。不知道如何做那部分。

这是一个小提琴：http: //jsfiddle.net/bG52W/

的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
    });
  });

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

4

2 回答 2

0

首先，您的选择器 $("#accordion") 是错误的。应该是 $( ".accordion" )

于 2013-04-14T07:04:06.817 回答
0

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
    });
});
于 2013-04-14T07:07:51.280 回答