jQuery切换图片未切换

Question

I have created expandable links where the arrow changes when you expand the link. Expandable works great and the arrow keeps changing correctly when I expand the other link. It doesn't switch correctly if I expand the same link.

Here is a 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

Replacing lines 8 through 13 with the following should toggle your arrow class properly:

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

Answer 2

Add the class change code in slideToggle() callback. Because the ul is hidden only when slide is complete, which is when you need to remove the class.

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

Add this to the click event, it toggle the class :

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

Demo : jsfiddle