Question

我正在尝试使用以下JQUERY创建一个手风琴类型菜单：

function initMenu() {
    $('#menu ul').hide();
        $('#menu li a').click(
            function() {
                $(this).next().slideToggle('normal');
                $(this).css("background", "url(customnav_selected.png) top right");
            }
        );
}
$(document).ready(function() {initMenu();});

这是有效的，当我点击它扩展的菜单链接并且菜单标题背景改变时。

但是，当我再次单击它以折叠菜单时，我希望它能够改回来。

有人可以帮忙吗？

Answer 1

而不是：

$(this).css("background", "url(customnav_selected.png) top right");

将该样式放入CSS类中，并使用toggleClass代替css，例如：

$(this).toggleClass("selected"); //assuming a class of .selected

所以点击处理程序变为：

$('#menu li a').click(function() {
     $(this).next().slideToggle('normal');
     $(this).toggleClass("selected");
});

和风格：

<style>
.selected  {background: url(customnav_selected.png) top right} 
</style>

Answer 2

将background-image设置为none（或初始值）。

我发现直接将类设置为特定的html元素比css属性更容易，然后添加/删除这些类。

Answer 3

将背景样式设置为空字符串应将其还原为从样式表继承的样式。这假设默认样式来自样式表，如果不是，则必须手动重置。

重置CSS背景图片

3 个答案: