我制作了一个菜单，当点击它时它会将 Canvas 推到右边。但是当您打开菜单并选择要转到的章节时，菜单不会自动关闭。所以你不得不再次按下菜单按钮来关闭菜单，但我希望它在你选择一章后自行关闭。
另一种选择是固定菜单按钮或标题。但是当我这样做时，按钮不会在您按下时向右滑动，因此您无法按下以关闭它...
我希望我的故事能让人理解。这是 JSFiddle
HTML
<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<h3>Menu</h3>
<a href="#chapter1">Home</a>
<a href="#chapter2">Catering</a>
<a href="#chapter3">Menu</a>
<a href="#chapter4">Contact</a>
</nav>
<div class="container">
<div class="main">
<header>
<button id="showLeftPush"></button>
</header>
<div id="chapter1"></div>
<div id="chapter2"></div>
<div id="chapter3"></div>
<div id="chapter4"></div>
<section>
<button id="showLeft">Show/Hide Left Slide Menu</button>
<button id="showRight">Show/Hide Right Slide Menu</button>
<button id="showTop">Show/Hide Top Slide Menu</button>
<button id="showBottom">Show/Hide Bottom Slide Menu</button>
</section>
<section class="buttonset">
<button id="showLeftPush">Show/Hide Left Push Menu</button>
<button id="showRightPush">Show/Hide Right Push Menu</button>
</section>
</div>
</div>
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById('cbp-spmenu-s1'),
showLeft = document.getElementById('showLeft'),
showLeftPush = document.getElementById('showLeftPush'),
body = document.body;
showLeft.onclick = function() {
classie.toggle(this, 'active');
classie.toggle(menuLeft, 'cbp-spmenu-open');
disableOther('showLeft');
};
showLeftPush.onclick = function() {
classie.toggle(this, 'active');
classie.toggle(body, 'cbp-spmenu-push-toright');
classie.toggle(menuLeft, 'cbp-spmenu-open');
disableOther('showLeftPush');
};
function disableOther(button) {
if (button !== 'showLeft') {
classie.toggle(showLeft, 'disabled');
}
if (button !== 'showLeftPush') {
classie.toggle(showLeftPush, 'disabled');
}
}
</script>
CSS
.cbp-spmenu {
position: fixed;
background: #333;
-webkit-box-shadow: inset -15px 0px 17px -7px rgba(0, 0, 0, 0.58);
-moz-box-shadow: inset -15px 0px 17px -7px rgba(0, 0, 0, 0.58);
box-shadow: inset -15px 0px 17px -7px rgba(0, 0, 0, 0.58);
}
.cbp-spmenu h3 {
font-size: 1.9em;
padding: 20px;
margin: 0;
font-weight: 300;
font-family:'Amatic SC', cursive;
color: white;
}
.cbp-spmenu a {
display: block;
font-size: 1.1em;
font-weight: 300;
font-family:'Amatic SC', cursive;
color: white;
text-decoration: none;
}
.cbp-spmenu a:hover {
background: rgba(65, 65, 65, 0.3);
}
.cbp-spmenu a:active {
}
.cbp-spmenu-vertical {
width: 240px;
height: 100%;
top: 0;
z-index: 1000;
}
.cbp-spmenu-vertical a {
padding: 1.2em;
}
.cbp-spmenu-left {
left: -240px;
}
.cbp-spmenu-left.cbp-spmenu-open {
left: 0px;
}
.cbp-spmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.cbp-spmenu-push-toright {
left: 240px;
}
.cbp-spmenu, .cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-height: 26.375em) {
.cbp-spmenu-vertical {
font-size: 90%;
width: 190px;
}
.cbp-spmenu-left, .cbp-spmenu-push-toleft {
left: -190px;
}
}
body, html {
border: none;
margin: 0;
padding: 0;
background: #ccc;
font-family:'Quicksand', sans-serif;
}
section {
display: none;
}
header {
background: #00a75b;
width: 100%;
height: 76px;
}
button {
color: white;
margin: 15px 0px 0px 15px;
width: 45px;
height: 45px;
border: none;
cursor: pointer;
transition: 0.2s;
background: #ccc;
}
button:hover {
opacity: 0.8;
}
#chapter1 {
height: 400px;
background: #ededed;
width: 100%;
}
#chapter2 {
height: 400px;
background: #ccc;
width: 100%;
}
#chapter3 {
height: 400px;
background: #ededed;
width: 100%;
}
#chapter4 {
height: 400px;
background: #ccc;
width: 100%;
}
JavaScript
(function (window) {
'use strict';
function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;
if ('classList' in document.documentElement) {
hasClass = function (elem, c) {
return elem.classList.contains(c);
};
addClass = function (elem, c) {
elem.classList.add(c);
};
removeClass = function (elem, c) {
elem.classList.remove(c);
};
} else {
hasClass = function (elem, c) {
return classReg(c).test(elem.className);
};
addClass = function (elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function (elem, c) {
elem.className = elem.className.replace(classReg(c), ' ');
};
}
function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}
window.classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
})(window);
最佳答案
你必须创建一个函数，当点击一个章节的链接时也会产生一个 showLeftPush.click()
关于javascript - 单击后关闭菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27779021/