2013-07-10 3 views
0

Я сейчас борюсь с этой вещью. Я отчаянно нуждаюсь в экспертном взгляде.JQuery UI Аккордеон в скрытом div

Итак, я пытаюсь настроить аккордеон JQuery UI в пределах страницы. Pageslide скрыт, который скрывает, а затем переходит в слайды. Аккордеон в страницах не очень глючит. Первый заголовок всегда свернут и заголовок, который я пытаюсь настроить с помощью ссылки, не открывается.

Я попросил моего хорошего друга Google дать совет. Есть люди с одинаковой проблемой. Я абсолютно уверен, что он должен что-то сделать, когда родительский аккордеон изначально скрыт.

Не существует способа, по которому я могу запускать аккордеон после просмотра страниц?

Примером этого can be found here (нажмите на ссылку в гармошку, чтобы стрелять второй аккордеон в пределах pageslide)

минимизированы проблемы:

<!doctype html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script> 
</head> 
<body> 
<div id="ac"> 
<h3>One</h3> 
<div> 
Lorem Ipsum Blah Blah Blah 
</div> 
<h3>Two</h3> 
<div> 
Lorem Ipsum Blah Blah Blah 
</div> 
<h3>Three</h3> 
<div> 
Lorem Ipsum Blah Blah Blah 
</div> 
</div> 
<script> 
    $("#ac").accordion(); 
    $("#ac").hide(); 
    $("#ac").accordion('activate',2); 
    $("#ac").show(); 
</script> 
</body> 
</html> 
+0

Прежде всего, вместо отправки нам ссылку на ваш сайт, чтобы попытаться свести к минимуму ваши проблемы с помощью jsfiddle или codepen. Я бы сказал, что просто применяйте минималистичный подход к созданию багги-выборки. Все, включая вас самих, смогут быстрее понять и исправить проблему. – Learner

+0

Ты прав, делай. – WIWIWWIISpitFire

+0

Образец не отображает слайд страницы и второй аккордеон. – Learner

ответ

1

Вот является jsfiddle example того, как вы должны это сделать, чтобы работа

HTML:

<div class="accordion glossWrap"> 
    <h3>titel</h3> 
    <div> 
     <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.</p> 
    </div> 
    <h3>titel</h3> 
    <div> 
     <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.</p> 
    </div> 
</div> 
<a href="#" class="glossary" data-panel="1">Open me</a> 

JS:

var $accordion = $(".glossWrap"), 
    panelId = parseInt(window.location.hash.replace(/#panel/, "")) || 0; 

$accordion.accordion({ 
    collapsible: true, 
    active: panelId, 
    heightStyle:"content", 
    header:"h3" 
}); 

$("a.glossary").on("click", function (e) { 
    e.preventDefault(); 
    var toOpen = $(this).data("panel"); 
    $accordion.accordion("option", "active", toOpen); 
}); 
+0

Спасибо за ответ, действительно оцените это! на самом деле это не проблема. Проблема возникает из-за первоначально скрытого div. Это заставляет аккордеон открывать первый заголовок, как если бы он находился за пределами аккордеона. (трудно объяснить, см. код) – WIWIWWIISpitFire

+0

Я не понимаю, почему вы сначала спрячете его, затем активируете вторую панель, а затем покажете ее. Почему бы вам не активировать вторую панель с самого начала? –

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