我试图找出正确的方法,或者更好的方法是在单击元素时滑出导航块,然后在单击相同元素时隐藏导航块。这是我到目前为止所拥有的:
$('.menu').click(function(e) {
e.preventDefault();
$('#pic-slideNav').css('display', 'block');
if ($.browser.webkit) {
$('#pic-wrapper').css('-webkit-transform', 'translate(250px,0px)');
console.log('This is Chrome');
} else {
$('#pic-wrapper').css('transform', 'translate(250px,0px)');
console.log('This is Everything else');
}
});
我还在检查浏览器类型,以便通过正确的 css 规则。
更新了对我有用的代码:
$('.menu-icon').click(function(e) {
e.preventDefault();
if($('#pic-slideNav').is(':visible')) {
$('#pic-slideNav').hide();
if ($.browser.webkit) {
$('#pic-wrapper').css('-webkit-transform', 'translate(0px,0px)');
console.log('This is Chrome');
} else {
$('#pic-wrapper').css('transform', 'translate(0px,0px)');
console.log('This is Everything else');
}
} else {
$('#pic-slideNav').show();
if ($.browser.webkit) {
$('#pic-wrapper').css('-webkit-transform', 'translate(250px,0px)');
console.log('This is Chrome');
} else {
$('#pic-wrapper').css('transform', 'translate(250px,0px)');
console.log('This is Everything else');
}
}
});
我确信有一种更清洁的方法可以实现这一目标,但它确实有效。