JQuery UI Accordion 使用问题

Question

我正在尝试使用 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>';

Answer 1

从 文档 中：

$('.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>"); }
});

Answer 2

$('.ui-accordion').bind('accordionchange', function(event, ui) {
  $("<div/>", {html : "Hello World"}).appendTo(ui.newContent);
});