2013-04-14 2 views
0

Возникли проблемы с jQuery снова ... На этот раз мне нужен сворачиваемый аккордеон для моей навигации.Проблема с jQuery UI аккордеон (складывается)

Когда я нажимаю «работа», я хочу, чтобы список был открыт. В настоящее время я использую тот же jquery, который используется в примере here.

Прямо сейчас, я просто пытаюсь заставить его работать ... Но я бы хотел, чтобы он по умолчанию рухнул, чтобы его можно было открыть. Не знаете, как это сделать.

Вот скрипку: 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 слева.

Другие, чем ваша структура была немного неправильно:

Разметка вашего аккордеона контейнера необходимо пары заголовков и панелей контента:

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

Смежные вопросы