菜单栏不切换左侧位置
问题描述:
我的问题是,我试图让我的菜单按钮,当你再次点击它移到左位置230px
,回30px
。但是,由于某种原因,它没有按照我想要的那样工作。
我想要的东西发生
当用户点击一次的菜单按钮,我想菜单改变它的左侧位置,以230px
时,当菜单用户点击即可关闭导航栏,我想在菜单的左边位置回到30px
什么我得到
目前,菜单按钮只改变其左侧位置230px
,但未恢复30px
答
你的类.toggle
没有设置回left: 30px;
。您可以在打开/关闭菜单时使用toggleClass
。
的jQuery:
if($nav.css("width", "20%")) {
$toggle.toggleClass('active');
} else if($nav.css("width", "0")) {
$toggle.toggleClass('active');
}
CSS:
.toggle {
position: fixed;
top: 30px;
left: 30px;
cursor: pointer;
color: #333;
transform: scale(1);
transition: all 300ms ease-in-out;
&:hover {
transform: scale(1.2);
}
&.active {
left: 230px
}
}
答
$toggle.on("click",() => {
toggle($nav, 350,() => {
// toggle
if($nav.css("width", "20%")) {
$toggle.css("left", "230px");
} else if($nav.css("width", "0")) {
$toggle.css("left", "30px");
}
});
});
我觉得你的问题是$导航宽度总是> 0 而我更改代码:
$toggle.on("click",() => {
toggle($nav, 350,() => {
// toggle
if($nav.hasClass("active")){
$toggle.css("left", "30px");
$nav.removeClass("active");
}
else{
$toggle.css("left", "230px");
$nav.addClass("active");
}
});
});
希望有帮助。
答
你可以使用切换就像
$toggle.toggleClass('active');
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
nav {
background-color: #333;
position: fixed;
height: 100%;
width: 25%;
display: none; }
nav ul {
list-style: none; }
nav ul li {
display: block;
color: #fff;
font: 500 1em Raleway;
padding: 10px;
cursor: pointer; }
nav ul li:hover {
background-color: #fff;
color: #333; }
.toggle {
position: fixed;
top: 30px;
left: 30px;
cursor: pointer;
color: #333;
transform: scale(1);
transition: all 300ms ease-in-out; }
.toggle:hover {
transform: scale(1.2); }
.toggle.active {
left: 230px; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).on('load', function() {
// cache elements
let $toggle = $(".toggle");
let $nav = $(".nav")
$(document).ready(() => {
// activate nav bar
$toggle.on("click",() => {
toggle($nav, 350,() => {
\t \t \t \t \t $toggle.toggleClass('active');
});
});
});
function toggle(e, speed, callback) {
e.animate({width: 'toggle'}, speed);
if (callback) {
return callback();
}
};
});//]]>
</script>
</head>
<body>
<nav class="nav">
<ul>
<li>General Info</li>
<li>Specs</li>
<li>RAM/Memory</li>
<li>Program Versions</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> Settings</li>
</ul>
</nav>
<div class="toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
<script src="https://use.fontawesome.com/e66a204baf.js"></script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "403x9prh"
}], "*")
}
</script>
</body>
</html>
答
没有必要活动类检查状态 添加ID菜单按钮
<div id="menu-button" class="toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
实现这一目标更改切换到
$toggle.on("click",() => {
toggle($nav, 350,() => {
// toggle
document.getElementById("menu-button").classList.toggle('nav-active');
});
});
,并改变CSS来此
.toggle {
position: fixed;
top: 30px;
cursor: pointer;
color: #333;
transform: scale(1);
transition: all 200ms ease-in-out;
&:hover {
transform: scale(1.2);
}
&.nav-active{
left:230px;
}
}
+0
对不起,我删除了原来的左边:30px;你可以把它带回来 – Obed
很好的,我觉得你可以做'$ toggle.toggleClass( '主动');'没有的if/else如果 –
我也这么认为。那样会更有效率。但也许OP有理由这样做。 –