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 に答える