javascript - jQuery 切换图像不切换

Question

我创建了可扩展链接，当您展开链接时，箭头会发生变化。 Expandable 效果很好，当我展开另一个链接时，箭头会不断正确变化。如果我展开相同的链接，它不会正确切换。

这是一个demo .

HTML

<ul class="side-expand">
  <li class="expandor">
    <a class="adobe" href="#" id="vid_link3">Adobe Digital Editions</a>
    <ul>
      <li>
        <a href="#" id="link22"><i class="icon-video"></i>
        Introduction</a>
      </li>
    </ul>
  </li>
  <li class="expandor">
    <a class="android" href="#" id="vid_link4">Android</a>
    <ul>
      <li>
        <a href="#" id="link29"><i class="icon-video"></i>
        Introduction</a>
      </li>
    </ul>
  </li>
</ul>

JavaScript

$('.expandor > a:first-child').click(function(e) {
  e.preventDefault();
  var $this = $(this).next('ul');
  $(".side-expand li ul").not($this).slideUp();
  $this.slideToggle();
  $('.side-expand > li').css('background-color', 'transparent');

  $('.side-expand > li').removeClass('dexpandor');

  var visibleUL = $('.side-expand li').find('ul').is(':visible');
  if (visibleUL) {
    $(this).parent('li').css('background-color', 'transparent', 'font-weight', 'normal').addClass('dexpandor');
  }
});

arrow not changing for the same toggle

Answer 1

将第 8 行到第 13 行替换为以下内容应该可以正确切换箭头类:

$(this).parent().siblings().removeClass('dexpandor');
$(this).parent().toggleClass('dexpandor');