Question

我试图让我的崩溃<a href="#">从“更多信息”转到“更少信息”，每次点击时都会将羽绒服变为向上变形，反之亦然

<a id="infoToggle" data-toggle="collapse" href="#headlineMore" aria-
expanded="false" aria-controls="headlineMore"><span class="glyphicon 
glyphicon-chevron-down work-list" aria-hidden="true"></span>  More info <span 
class="glyphicon glyphicon-chevron-down work-list" aria-hidden="true"></span></a>

提前感谢您，如果需要更清晰，请告诉我们！

Answer 1

实际上你可以在点击事件上使用简单的jQuery来传递它：

$('body').on("click", "#infoToggle", function() {
  $(this).find('.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-right')
});

示例：jsFiddle

要使文字也发生变化，您可以使用以下内容：

$('body').on("click", "#infoToggle", function() {
  var toggle = $(this).find('.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
  $(this).contents().filter(function() {
    return this.nodeType === 3;
  }).replaceWith(!toggle.hasClass('glyphicon-chevron-down') ? 'More info..' : 'Less info..')
});

示例：jsFiddle/2

Answer 2

由于您显然尝试以可访问的方式执行此操作，使用示例代码中的aria属性，您可以使用aria-expanded值的更改来更新V形。

这是一个例子： https://jsfiddle.net/scottaohara/eg7hjws8/7/

在标记中，我已将链接更改为按钮，因为这不会在任何地方进行链接，而是切换页面上其他元素的状态。

<button type="button" id="infoToggle" data-toggle="collapse" href="#headlineMore" aria-expanded="false" aria-controls="headlineMore">
  <span class="state">More</span> info
  <span class="glyphicon glyphicon-chevron-down work-list" aria-hidden="true">
  </span>
</button>

jQuery函数只是改变aria-expanded属性的状态。您需要添加必要的代码来切换目标元素的可见性（headlineMore）。

$('#infoToggle').on('click', function() {
  if ( $(this).attr('aria-expanded') === 'true' ) {
    $(this).attr('aria-expanded', 'false');
    $(this).find('.state').html('More');
  }
  else {
    $(this).attr('aria-expanded', 'true');
    $(this).find('.state').html('Less');
  }
  /* add in the necessary show/hide toggle for the targeted element here */
});

你可以看到我在jsfiddle中汇总的CSS，虽然我怀疑这是你在项目中需要的东西，所以我没有把它包含在这里。

如何使折叠链接从更多信息更改为更少的信息

2 个答案: