2013-04-14 64 views
0

再次遇到jQuery問題 - 這一次,我需要一個可摺疊的手風琴用於導航。jQuery UI手風琴故障(可摺疊)

當我點擊「工作」時,我想打開列表。我目前使用的示例here中使用了相同的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 
    }); 
    }); 

任何和所有幫助表示讚賞!

回答

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 
    }); 
}); 
+0

謝謝!對此,我真的非常感激。 –

0

首先你的選擇器$(「#accordion」)是錯誤的。應該是$( ​​「.accordion」)

+0

有沒有辦法讓它默認爲摺疊? –

+0

@Brooke http://jsfiddle.net/hellomynameisluc/bG52W/4/爲手風琴功能添加「active:false」選項 – aph107