1
我一直在用这个菜单进行操作，只有打开时才能切换。该菜单是一个单独的HTML文件，被称为我的主要PHP页面。我想用X退出菜单，或者在滑出菜单以外的任何点击。只有在打开的情况下才能切换sidenav菜单
这就是我目前使用的。我使用隐藏而不是切换它甚至没有侧面。
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "230px"
}
\t
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
\t
\t
}
</script>
<script>
$(document).ready(function(){
$("html").click(function(){
$(".sidenav").toggle();
});
});
</script><html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
\t <title></title>
</head>
<body><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"></body>
<link href="http://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet" type="text/css" />
<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://ajax.googleapis.com/.../jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
\t left:0;
background-color: #e6cfa0;
overflow-x: hidden;
transition: .3s;
\t bottom: 0;
\t
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16px;
color: #556b2f;
display: block;
transition: 0.3s
}
.sidenav h3, .offcanvas a:focus{
font-size: 25px;
color: #556b2f;
\t padding-left: 20px;
}
.sidenav a:hover, .offcanvas a:focus{
color: #c9bb89;
}
.sidenav .closebtn {
position:sticky;
top: 0;
font-size: 36px;
margin-left: 155px;
\t
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 10px;}
.sidenav a {font-size: 12px;}
}
</style>
<!-- Start Sidebar menu --><!-- large menu-->
<div class="hidden-xs hidden-sm">
<nav class="text1-nav">
<a class="album" href="http://www.littlebearcustomholsters.com/albums/" target="new"><h1>Album of Holsters</h1></a>
<ul>
\t <li>
\t <h3>Holster Care and Firearms Offered</h3>
\t </li>
\t <li><a class="care" href="care.php">Care For your Holster</a></li>
\t <li><a class="offered" href="offered.php">Firearms Offered</a></li>
\t <li>
\t <h3 class="iwb"><a href="iwb.php">Inside the Waistband</a></h3>
\t </li>
\t <li><a class="sd" href="sd.php">Salty Dad Special (SD Special)</a></li>
\t <li><a class="qdsquared" href="qdsquared.php">QD Squared *NEW*</a></li>
\t <li><a class="hoplite" href="hoplite.php">Hoplite IWB</a></li>
\t <li><a class="wickedaxe" href="wickedaxe.php">Wicked Axe</a></li>
\t <li><a class="aegis" href="aegis.php">Aegis Calypto</a></li>
\t <li>
\t <h3 class="owb"><a href="owb.php">Outside Waistband</a></h3>
\t </li>
\t <li><a class="ippos" href="ippos.php">'Ippos Belt Slide</a></li>
\t <li><a class="swspecial" href="swspecial.php">SW Special</a></li>
\t <li>
\t <h3 class="tsr"><a href="tsr.php">Thigh Rigs and Shoulder Holsters</a></h3>
\t </li>
\t <li><a class="sporran" href="sporran.php">Sporran Holster</a></li>
\t <li><a class="shoulder" href="shoulder.php">Shoulder Holster with Double Mag Carrier</a></li>
\t <li><a class="mbrig" href="mbrig.php">MB Chest Rig</a></li>
\t <li>
\t <h3 class="mcb"><a href="mcb.php">Mag Carriers and Belts</a></h3>
\t </li>
\t <li><a class="beltslide" href="beltslide.php">Belt Slide Mag Carriers</a></li>
\t <li><a class="iwbmag" href="iwbmag.php">IWB Mag Carriers</a></li>
\t <li><a class="shooterbelt" href="shooterbelt.php">Shooters Belt</a></li>
\t <li>
\t <h3 class="custom"><a href="custom.php">Custom Orders</a></h3>
\t </li>
\t <li><a class="exotics" href="/exotics.php">Exotics</a></li>
\t <li><a class="artwork" href="artwork.php">Artwork</a></li>
\t <li>
\t <h3 class="custom"><a href="requests.php">By Request Only</a></h3>
\t </li>
\t <li><a class="mjolnir" href="mjolnir.php">Mjolnir</a></li>
\t <li><a class="csrig" href="csrig.php">CS Thigh rig</a></li>
</ul>
<div class="vetlogo"><a href="http://www.veteranownedbusiness.com" target="_blank"><img alt="Veteran Owned Business Directory, Get your free listing, now!" height="180px" src="images/VeteranOwnedBusinessHorizontal.jpg" width="300px " /></a></div>
</nav>
</div>
<!--mobile menu-->
<div class="visible-xs visible-sm hidden-md hidden-lg"><span class="quote" onclick="openNav()"><img src="images/menu.png" /> Main Menu </span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "230px"
}
\t
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
\t
\t
}
</script>
<script>
$(document).ready(function(){
$("html").click(function(){
$(".sidenav").toggle();
});
});
</script>
\t
<nav class="sidenav" id="mySidenav"><a class="closebtn" href="javascript:void(0)" onclick="closeNav()">×</a> <a class="care" href="care.php">Care For your Holster</a> <a class="offered" href="offered.php">Firearms Offered</a> <a class="album" href="http://www.littlebearcustomholsters.com/albums/" target="new">Album of Holsters</a>
<h3 class="iwb">Inside Waistband</h3>
<a class="sd" href="sd.php">Salty Dad Special (SD Special)</a> <a class="qdsquared" href="qdsquared.php">QD Squared *coming soon*</a> <a class="hoplite" href="hoplite.php">Hoplite IWB</a> <a class="wickedaxe" href="wickedaxe.php">Wicked Axe</a> <a class="aegis" href="aegis.php">Aegis Calypto</a>
<h3 class="owb">Outside Waistband</h3>
<a class="ippos" href="ippos.php">'Ippos Belt Slide</a> <a class="swspecial" href="swspecial.php">SW Special</a>
<h3 class="tsr">Thigh Rigs and Shoulder Holsters</h3>
<a class="sporran" href="sporran.php">Sporran Holster</a> <a class="shoulder" href="shoulder.php">Shoulder Holster with Double Mag Carrier</a> <a class="mbrig" href="mbrig.php">MB Chest Rig</a>
<h3 class="mcb">Mag Carriers and Belts</h3>
<a class="beltslide" href="beltslide.php">Belt Slide Mag Carriers</a> <a class="iwbmag" href="iwbmag.php">IWB Mag Carriers</a> <a class="shooterbelt" href="shooterbelt.php">Shooters Belt</a>
<h3 class="custom">Custom Orders</h3>
<a class="exotics" href="/exotics.php">Exotics</a> <a class="artwork" href="artwork.php">Artwork</a>
<h3 class="custom">By Request Only</h3>
<a class="mjolnir" href="mjolnir.php">Mjolnir</a> <a class="csrig" href="csrig.php">CS Thigh rig</a><br />
<a href="http://www.veteranownedbusiness.com" target="_blank"><img alt="Veteran Owned Business Directory, Get your free listing, now!" height="180px" src="images/VeteranOwnedBusinessHorizontal.jpg" width="300px " /></a></nav>
</div>
</html>感谢
你应该已经发布的代码，而不是你的网站链接。 – Jer