Проблема в использовании JQuery UI Accordion

Я пытаюсь использовать JQuery Accordion, однако сталкиваюсь с трудностями при написании кода.

 <div id="accordion">
    <h3><a href="#" id="first">First header</a></h3>
    <div id="first_content">First content</div>
    <h3><a href="#" id="second">Second header</a></h3>
    <div id="second_content">Second content</div>
</div>

Я хочу изменить содержимое div под первым заголовком, когда пользователь щелкает заголовок, однако я не могу понять, как мне написать функцию привязки и что еще упомянуть в функции аккордеона.

$( "#accordion" ).accordion({
   change: function(event, ui) { what to write in here }
});

$( "#accordion" ).bind( "accordionchange", function(event, ui) {
  what to write in here
});

Предположим, что HTML-контент, который нужно заменить, присутствует в

var html = '<h1>Accordion Usage</h1>';

jquery-ui jquery-ui-accordion
person Apoorv Saxena    schedule 09.09.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Из документации:

$('.ui-accordion').bind('accordionchange', function(event, ui) {
  ui.newHeader // jQuery object, activated header
  ui.oldHeader // jQuery object, previous header
  ui.newContent // jQuery object, activated content
  ui.oldContent // jQuery object, previous content
});

Таким образом, вы можете использовать функции jQuery для замены содержимого элемента:

$( "#accordion" ).bind( "accordionchange", function(event, ui) {
    ui.newHeader.html("<h1>Accordion Usage</h1>");
});

или вы можете указать обратный вызов при инициализации:

$( "#accordion" ).accordion({
    change: function(event, ui) { ui.newHeader.html("<h1>Accordion Usage</h1>"); }
});
person Dennis    schedule 09.09.2011
comment
Хотя вы не хотели бы помещать эти теги <h1> в innerHTML заголовка - person Sam Dufel; 09.09.2011
comment
Поэтому мне нужно написать только следующее $( #accordion ).accordion(); и ui.newHeader.html(‹h1›Использование аккордеона‹/h1›); - person Apoorv Saxena; 09.09.2011
comment
Вы можете предоставить его с accordion или bind для событияaccordionchange. - person Dennis; 09.09.2011
comment
Я использую метод обратного вызова при инициализации, но, похоже, он у меня не работает, хотя я вижу аккордеон, но ничего не происходит, когда я нажимаю на заголовки. - person Apoorv Saxena; 09.09.2011
comment
Получил мою ошибку .. использовал wijaccordion вместо аккордеона. Виноват!! - person Apoorv Saxena; 09.09.2011