Question

我正在使用.toggle通过单击锚点展开/收回单个div，并且还有一个锚点可以展开/收回所有div。单击单个锚点时，锚点文本从“+”变为“ - ”。当前单击展开/缩进所有锚点时，单个锚点文本不会更改 - 我希望它们在单击展开/缩进所有锚点时从“+”更改为“ - ”。下面是我的代码 - 除了在expand all上更改锚文本外，所有代码都正常工作：

HTML：

<a class="expand-all" href="#">+ Expand All</a>

<a class="toggle toggle-engine" href="#">+</a>
<div class="expand specs-engine"></div>

<a class="toggle toggle-body" href="#">+</a>
<div class="expand specs-engine"></div>

JS：

$('.expand').click(function() {$(this).toggle(400);});
$('.expand-all').click(function() {
  if ($(this).text() == '+ Expand All')
    $('.expand').show(400).find('.toggle').text('-');
  else
    $('.expand').hide(400).find('.toggle').text('+');
  $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All');
});


$('.toggle-engine').click(function() {
    $('.specs-engine').toggle(400);
$(this).text($(this).text() == '+' ? '-' : '+');
return false;
});

Answer 1

$('.expand').click(function() {$(this).toggle(400);});
$('.expand-all').click(function() {
  if ($(this).text() == '+ Expand All')
    $('.expand').show(400).prev('.toggle').text('-');
  else
    $('.expand').hide(400).prev('.toggle').text('+');
  $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All');
});


$('.toggle').click(function() {
    $(this).next('.expand').toggle(400);
    $(this).text($(this).text() == '+' ? '-' : '+');
    return false;
});

我将find更改为prev，这会使文本更改生效。底部是“奖金”，如果你这样做，你不必为每个项目编写相同的代码。

Answer 2

如此： jsFiddle

示例从所有可见元素开始。

$('.expand').click(function() {$(this).toggle(400);});

$('.expand-all').click(function() {
  $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All');
  if ($(this).text() == '+ Expand All')
  {
      $('a.toggle').text('+');
      $('div.expand').slideUp();
  }
  else
  {
      $('a.toggle').text('-');
      $('div.expand').slideDown();
  }
});

$('.toggle').click(function() {
    $(this).next('.expand').toggle(400);
    $(this).text($(this).text() == '+' ? '-' : '+');
});

更改锚文本 - 使用.toggle jQuery扩展/撤消全部

2 个答案: