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

}

    }):

我为格式化道歉，在移动设备上可怕。

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

1 个答案: