Question

我第一次玩jQueryUI手风琴而且我试图制作简单的扩展div，当它扩展时切换它的标题文本并滑动到内容的底部

我有默认的h3标题，说“＆＃39;更多＆＃39;我想让它更改为＆＃39; Less＆＃39;，当div被展开时，当它被关闭时还原为＆＃39; More＆＃39;更多＆＃39;更多＆＃39;当它关闭时。此外，标题应在展开时向下滑动并保持在内容之下。

我一直在寻找没有运气的2天。

由@Irvin Dominin aka Edward改变文字

$(function() {
  $( "#accordion" ).accordion({ 
    header: 'h3', 
    collapsible: true, 
    active: false, 
    activate: function (event, ui) {
    ui.newHeader.find(".accordion-header").text("Less")
    ui.oldHeader.find(".accordion-header").text("More")
  }
});

由@vitaliy zadorozhnyy滑动标题

var headers = $('#accordion h3');
headers.click(function () {
    var panel = $(this).prev();
    var isOpen = panel.is(':visible');

    $(this).text(!isOpen ? 'Less' : 'More');

    panel[isOpen ? 'slideUp' : 'slideDown']();
    return false;
});

现在的问题是这两者无法一起使用。知道如何混合它们吗？

Answer 1

您可以使用activate事件切换您的手风琴标题文字：

激活面板后触发（动画后）完成）。如果手风琴先前已经倒塌，ui.oldHeader 和ui.oldPanel将是空的jQuery对象。如果手风琴是折叠，ui.newHeader和ui.newPanel将是空的jQuery对象。

代码：

$('#accordion').accordion({
    activate: function (event, ui) {
        ui.newHeader.find(".accordion-header").text("Less")
        ui.oldHeader.find(".accordion-header").text("More")
    }
});

演示：http://jsfiddle.net/IrvinDominin/r93wn/

Answer 2

如果您将accordion与一个项目一起使用并想在活动时滑动它，请使用collapsible选项

在您的情况下$('#accordion').accordion({collapsible:true}); 但如果你想向下滑动标题，你可以使用另一种方法。我已经为你JsFiddle做了一些示例。希望它有所帮助。

jQueryUI手风琴 - 标题文本和幻灯片

2 个答案: