Question

所以我有这个Demo我希望当用户点击高级时它会展开菜单，它会将文本“ADVANCED”更改为“BASIC”，它会将箭头从向下更改为UP。有什么建议吗？

function toggleChevron(e) {
    $(e.target)
   .prev('.panel-heading')
   .find("i")
   .toggleClass('fa-angle-up fa-angle-down')
}

$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);

Answer 1

我认为您正在寻找类似的内容。

function toggleChevron(e) {
    var link = $(this);
    if (link.text().trim() == 'ADVANCED')
        link.html('BASIC <i class="indicator fa fa-angle-up"></i>')
    else
        link.html('ADVANCED <i class="indicator fa fa-angle-down"></i>')
}

$('#headingOne a').on('click', toggleChevron);

DEMO

Answer 2

您必须在手风琴上绑定点击事件而不是您所做的事件。然后根据已显示的内容更改文本。

function toggleChevron(e) {
    var text = $(e.target).html();

  if( $(e.target).find('i').hasClass('fa-angle-down') ) {
    $(e.target).html( text.replace('ADVANCED', 'BASIC') );
  } else {
    $(e.target).html( text.replace('BASIC', 'ADVANCED') );
  }

  $(e.target)
    .find('i')
    .toggleClass('fa-angle-up fa-angle-down');
}

$('#accordion').on('click', toggleChevron);

https://jsfiddle.net/L03e5hty/2/

编辑：更好地回答here

如何在点击时更改箭头和文字？

2 个答案:

DEMO