Question

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

这是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');

Answer 2

在slideToggle()回调中添加类更改代码。因为ul仅在幻灯片完成时隐藏，这时您需要删除该类。

DEMO

$('.expandor > a:first-child').click(function(e) {
  e.preventDefault();
  var $this = $(this).next('ul');
  $(".side-expand li ul").not($this).slideUp();
  $this.slideToggle(function() {
    $('.side-expand > li').css('background-color', 'transparent');
    $('.side-expand > li').removeClass('dexpandor');
    var visibleUL = $(this).closest('li').find('ul').is(':visible');
    if (visibleUL) {
      $(this).parent('li').css('background-color', 'transparent', 'font-weight', 'normal').addClass('dexpandor');
    }
  });
});

.side-expand li ul {
  display: none;
}

.expandor {
  background-image: url("https://odhelp.blob.core.windows.net/content/artifacts/img/right-arrow-small.png");
}

.expandor,
.dexpandor {
  background-color: transparent;
  background-position: right 13px;
  background-repeat: no-repeat;
}

.dexpandor {
  background-image: url("https://odhelp.blob.core.windows.net/content/artifacts/img/down-arrow-small.png");
}

.side-expand li a {
  font-size: 14px;
  font-weight: normal;
  padding-left: 70px;
}

.side-expand li a {
  background-size: 25px auto !important;
  border-bottom: 1px solid rgb(235, 235, 235);
  color: #000;
  display: block;
  font-size: 15px;
  padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="side-expand">
  <li class="expandor">
    <a id="vid_link3" value="6plk07k8op" href="#" class="adobe">Adobe Digital Editions</a>
    <ul>
      <li><a value="6plk07k8op" href="#" id="link22"><i class="icon-video"></i> Introduction</a></li>
      <li><a value="q1kogk5dc2" href="#" id="link23"><i class="icon-video"></i> Install</a></li>
      <li><a value="zmdge1whxu" href="#" id="link24"><i class="icon-video"></i> Authorize your computer</a></li>
      <li><a value="snl5pnvv27" href="#" id="link25"><i class="icon-video"></i> Read eBooks</a></li>
      <li><a value="8ldljcbtw0" href="#" id="link26"><i class="icon-video"></i> Return eBooks </a></li>
      <li><a value="tfrp7xjgus" href="#" id="link27"><i class="icon-video"></i> Transfer eBooks to reader </a></li>
      <li><a value="men1mw9an3" href="#" id="link28"><i class="icon-video"></i> Remove eBooks from reader</a></li>
    </ul>
  </li>
  <li class="expandor">
    <a id="vid_link4" value="ayfssj4211" href="#" class="android">Android</a>
    <ul>
      <li><a value="ayfssj4211" href="#" id="link29"><i class="icon-video"></i> Introduction </a></li>
      <li><a value="aqv1ieh6zd" href="#" id="link30"><i class="icon-video"></i> Install the OverDrive app</a> </li>
      <li><a value="ospa26ccnh" href="#" id="link37"><i class="icon-video"></i> Return and share titles</a></li>
    </ul>
  </li>
</ul>

Answer 3

将此添加到click事件中，它会切换类：

  $(this).parent('li').css('background-color','transparent', 'font-weight', 'normal').toggleClass('dexpandor','expandor');

演示：jsfiddle

jQuery切换图像不切换

3 个答案: