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" ).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

来自documentation：

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

JQuery UI Accordion使用中的问题

2 个答案: