获取图像以在下拉菜单中切换为活动状态

Question

使用bootstrap 3模板，当下拉菜单打开时，我试图让图像在打开和关闭状态之间切换。

到目前为止，我可以让图像在单击时切换，但是当下拉链接不再激活时，它不会取消切换。

HTML

<a id="menu-toggle2" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<img id="icon-switch2" src="http://placehold.it/350x150" alt="Follow Us">

​

CSS

$('#menu-toggle2').on({
    'click': function(){
        $('#icon-switch2').attr('src','http://placehold.it/351x151');
    }
});

小提琴在这里：

https://jsfiddle.net/k237t19r/

谢谢你的帮助！

Answer 1

您可以通过以下几种方式来实现这一点。首先，您可以跟踪活动状态，并在此基础上切换图像。

var active = false:   

$('#menu-toggle2').on({
        'click': function(){
    If (!active){
            $('#icon-switch2').attr('src','http://placehold.it/351x151');
}else {
 $('#icon-switch2').attr('src','http://placehold2.it/351x151');
}
        }
    });

或者，您可以使用带有背景图像的类；

//css

#icon-switch2 {background-image: url ('path-to-image):}

#icon-switch2.active {background-image: url }

//jquery

$('#menu-toggle2').on({
        'click': function(){
            $('#icon-switch2').toggleClass('active');

}

    }):

我为我的格式道歉，在手机上太可怕了。