jQuery切换图像不切换

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