Динамическое создание JQuery Accordion - PullRequest
Новая
       22

Динамическое создание JQuery Accordion

1 голос
/ 14 августа 2011

У меня проблемы с созданием jQuery Accordion с использованием javascript.Он отлично создает ярлыки Accodion и показывает текст первого элемента.Он не отображает текст второго элемента, и когда вы нажимаете на него, вы также теряете первый прикрепленный текст навсегда. 

$("#tab-dock").append('<div id="daccordion">')

$("#daccordion").append('<div id="dinfo"><h3><a href="#">Info</a></h3>')
$("#dinfo").append('<div>Some info about this location.</div>')
$("#daccordion").append('</div>')

$("#daccordion").append('<div id="dmarket"><h3><a href="#">Market</a></h3>')
$("#dmarket").append('<div>Market info would go here!</div>')
$("#daccordion").append('</div>')

$("#tab-dock").append('</div>')

$("#daccordion").accordion({ header: "h3",navigation: true });

У меня есть другой Accodion, который был создан нормально, и он работает нормально.Я просто не могу заставить их соответствовать.Есть идеи?Спасибо!

Редактировать: Спасибо за все предложения, узнал немало только из них.Проблема оказалась из-за размера, я должен был вызвать изменение размера Аккордеона, чтобы заставить его работать.

Ответы [ 4 ]

0 голосов
/ 15 августа 2011

Спасибо за все предложения, узнал немало только из них.Проблема оказалась из-за размера, мне пришлось позвонить аккордеону изменить размер

0 голосов
/ 14 августа 2011

Вы должны удалить тег <div id="dinfo"> (и закрывающий тег).Аккордеон имеет следующую структуру: 

<div>
    <h3>
    <div>
    <h3>
    <div>
</div>

Теперь у вас есть дополнительные div вокруг каждой панели аккордеона (каждая комбинация h3, div).

0 голосов
/ 14 августа 2011

Проблема заключается в сочетании обоих этих ответов.Во-первых, настроенная вами структура на самом деле не совместима со стандартной сборкой jQuery UI.Во-вторых, "append" должен быть заполнен целыми элементами (либо в "" форме, либо "", либо работает).Что-то вроде этого будет делать то, что вы хотели, я думаю http://jsfiddle.net/wdy8z/2/

$("#tab-dock").append('<div id="daccordion" />');

$("#daccordion").append('<h3><a href="#">Info</a></h3>')
    .append('<div id="dinfo">Some info about this location.</div>')
    .append('<h3><a href="#">Market</a></h3>')
    .append('<div id="dmarket">Market info would go here!</div>');

$("#daccordion").accordion({ header: "h3",navigation: true });
0 голосов
/ 14 августа 2011

Вам не нужны закрывающие теги </div> в ваших append вызовах. Это может быть частью вашей проблемы.

Я создал эту скрипку - кажется, работает нормально. Возможно я не понимаю проблему. Можешь немного уточнить? На самом деле, единственное, что я добавил, чего не было в вашем вопросе, это держатель для аккордеона. Я создал div так: 

<div id='tab-dock'></div>

Это ваша разметка держателя?

...