您好我在互联网上搜索了一下,但没找到我想要的东西。 但无论如何,我正在寻找的是一些元素,如果一个元素被隐藏然后它会做一个动作,然后如果该元素是可见的,它将会做另一个动作。在这种情况下,我正在构建一个显示/隐藏菜单,当您单击菜单图标(带有“.toggle”类)时,它会将不透明度更改为1,当您隐藏菜单时,图标不透明度将再次变为0.6
无论如何,这是我的代码:
$(".sidebar_menu").hide();
$(".sidebar li.toggle").click(function(){
$(".sidebar_menu").animate({width: "toggle"}, 200);
// Here's where the code I can't figure out is gonna be.
});
希望你们能帮助我,这会很好!谢谢。
答案 0 :(得分:9)
这适用于hidden
和visible
元素:
$(".sidebar_menu").hide();
$(".sidebar li.toggle").click(function(){
$(".sidebar_menu").animate({width: "toggle"}, 200,
function() {
if($(this).is(':visible')){
$(".toggle").css({opacity: 1});
} else if ($(this).is(':hidden')) {
$(".toggle").css({opacity: 0.6});
};
})
});
});
使用.toggle()
修改
$(".sidebar_menu").hide();
$(".sidebar li.toggle").click(function(){
$(".sidebar_menu").toggle('slow',
function() {
if($(this).is(':visible')){
$(".toggle").css({opacity: 1});
} else if ($(this).is(':hidden')) {
$(".toggle").css({opacity: 0.6});
};
})
});
});
在这里您可以看到一个小例子:FIDDLE