我目前正在使用以下代码切换下拉菜单:
$(function() {
function toggleMenu(show) {
$(".dropdownInfo").toggle(show);
$('.userNavBar').css('background-color', show ? '#444' : '#333');
$('.upperBar').css('border-top-color', show ? '#ff556f' : '#333');
};
$('.userNavBar').click(function(e) {
toggleMenu(true);
e.stopPropagation();
});
$("body").click(function(e) {
toggleMenu(false);
});
});
是否有更快/更好/更有效的方式来切换div?这似乎是一大堆代码..
答案 0 :(得分:2)
在样式表中使用更多CSS,而不是内联。然后你可以切换一个班级,然后站着看 ... classy 。另一件事:您只能绑定一个click
事件侦听器,并在事件处理程序中检查是否应该打开或关闭菜单。
.userNavBar {
background-color: #333;
}
.userNavBar.active {
background-color: #444;
}
.upperBar {
border-top-color: #333;
}
.upperBar.active {
border-top-color: #ff556f;
}
$(function() {
function toggleMenu(show) {
$('.dropdownInfo').toggle(show);
$('.userNavBar, .upperBar').toggleClass('active', show);
};
$('body').on('click', function(e) {
var show = $(e.target).hasClass('userNavBar');
if (show) e.preventDefault(); // not sure this is even necessary anymore
toggleMenu(show);
});
});
另外,请不要混用单引号和双引号。选择一个,并保持一致。
答案 1 :(得分:-2)
您可以尝试切换持续时间