[英]Toggle background image of a link for accordion
I'm trying to get a links background image to toggle or swap on click for an FAQ accordion expand/contractable div using javascript. 我正在尝试获取链接背景图片,以使用javascript在FAQ手风琴展开/收缩div上单击时进行切换或交换。
I've gotten things working based on this jsfiddle example ( http://jsfiddle.net/QwELf/ ) 我已经根据这个jsfiddle示例( http://jsfiddle.net/QwELf/ )进行了工作
You can see my page working here ( http://bit.ly/1hfgcGL ) 您可以在此处查看我的页面( http://bit.ly/1hfgcGL )
The problem comes in when you click one of the toggle links a 3rd time. 当您第三次单击切换链接之一时,就会出现问题。 It gets the wrong background image and is then out of sync with how it should look.
它得到了错误的背景图像,然后与它的外观不同步。
Right arrow > for contracted state and downward arrow for expanded state are how they should be but the opposite shows up. 收缩状态应为右箭头>,收缩状态应为向下箭头,但相反。
It seems to work just fine in the jsfiddle on the 3rd or more clicks any idea what's going wrong with mine? 似乎在第3次或更多次点击jsfiddle中就可以正常工作了,我的想法到底出了什么问题?
Script 脚本
<script type="text/javascript">
function changeArrow(element){
var arrow = element;
if(arrow.className == 'background_one'){
arrow.className = 'background_two';
} else {
arrow.className = 'background_one';
}
}
</script>
CSS CSS
.background_one { text-decoration: none; padding-left: 26px; background: url(http://skmgroupwork.com/suntrust/landingpages/307m/chevright.gif) center left no-repeat;}
.background_two { text-decoration: none; padding-left: 26px; background: url(http://skmgroupwork.com/suntrust/landingpages/307m/chevdown.gif) center left no-repeat;}
HTML HTML
<a class="background_one" data-toggle="collapse" data-target="#demo4" onClick="changeArrow(this)">If I transfer my balance to a new Access 3 Equity Line, what will my interest rate be?</a>
You need to check if it has class, not if it is, as you have several on times. 您需要检查它是否具有类,而不是是否具有类,因为您有几次上班时间。 As you use jQuery you can use .hasClass() , .addClass() and removeCLass() .
使用jQuery时,可以使用.hasClass() ,.addClass()和removeCLass() 。 You might also want to look at .toggleClass() .
您可能还想看看.toggleClass() 。
function changeArrow(element) {
var $arrow = $(element);
if ($arrow.hasClass('background_one')) {
$arrow.removeClass('background_one');
$arrow.addClass('background_two');
} else {
$arrow.removeClass('background_two');
$arrow.addClass('background_one');
}
}
That is happening because the className also contains the class collapsed
the second time it's clicked. 发生这种情况是因为className 还包含第二次单击时
collapsed
的类。
I used IE's debugger and found this: 我使用IE的调试器,发现了这一点:
Perhaps you could use contains
instead of equals, like the following (untested, but should work): 也许可以使用
contains
而不是等于,如下所示(未经测试,但应该可以使用):
function changeArrow(element){
element.className = (arrow.className.contains('background_one') ?
'background_two' :
'background_one');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.