Question

我制作了一个完美的手风琴菜单，但我希望在扩展时更改某些文字的颜色。我希望文本＆＃34; h2 a＆＃34;手风琴展开时为红色，折叠时为蓝色。

这是我的代码，目前无效：

HTML：

<div class="accordionHead">
  <h2><a href="#">New Features<i class="dct"></i></a></h2>
</div>
<div class="accordionHead">
  <h2><a href="#">New Features<i class="dct"></i></a></h2>
</div>
...

jquery的

  $('.accordionHead').click(function () {
      $('.pane').slideUp('slow');
      $(this).find('h2 a').css("color", "red");

      if ($(this).next().is(':hidden') == true) {
          $(this).next().slideDown('slow');
          $(this).find('h2 a').css("color", "blue"); // this dont work
      }

      event.preventDefault();
  });

Answer 1

你应该能够在完成slideDown事件的动画链上链接一个函数：

var _this = $(this);
_this.next().slideDown('slow', 
    function() {
          _this.find('h2 a').css("color", "blue"); 
});

Jquery在这里引用：http://api.jquery.com/slidedown/

Answer 2

你检查隐藏的if语句有点不起作用（我使用了visible属性），你可以使用siblings() jquery函数选择另一个accordionHead。

JS代码：

$('.accordionHead').click(function () {
      $('.pane').slideUp('slow');
      $(this).find('h2 a').css("color", "red");

      if ($(this).parents().find('.accordionHead').is(':visible') == true) {
          $(this).next().slideDown('slow');
          $(this).siblings().find('h2 a').css("color", "blue");
      }

      event.preventDefault();
});

Working Fiddle

最近点击元素更改css颜色

2 个答案: