仅在打开时才切换sidenav菜单

时间：2017-02-24 11:17:10

标签： jquery

我一直在使用此菜单进行操作，只有在打开时才切换。菜单是一个单独的html文件，调用到我的主要php页面。我想用X退出菜单，或者在幻灯片菜单外单击任何一个。

这就是我目前正在使用的内容。我使用hide而不是切换它甚至没有出现。

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "230px"
}
	

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
	
	
}
</script>

<script>
    $(document).ready(function(){
        $("html").click(function(){
            $(".sidenav").toggle();
        });
    });
</script>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<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;
	left:0;
    background-color: #e6cfa0;
    overflow-x: hidden;
    transition: .3s;
   	bottom: 0;
	
}

.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;
	padding-left: 20px;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #c9bb89;
}

.sidenav .closebtn {
    position:sticky;
    top: 0;
    
    font-size: 36px;
     margin-left: 155px;
	   
}

@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>
	<li>
	<h3>Holster Care and Firearms Offered</h3>
	</li>
	<li><a class="care" href="care.php">Care For your Holster</a></li>
	<li><a class="offered" href="offered.php">Firearms Offered</a></li>
	<li>
	<h3 class="iwb"><a href="iwb.php">Inside the Waistband</a></h3>
	</li>
	<li><a class="sd" href="sd.php">Salty Dad Special (SD Special)</a></li>
	<li><a class="qdsquared" href="qdsquared.php">QD Squared *NEW*</a></li>
	<li><a class="hoplite" href="hoplite.php">Hoplite IWB</a></li>
	<li><a class="wickedaxe" href="wickedaxe.php">Wicked Axe</a></li>
	<li><a class="aegis" href="aegis.php">Aegis Calypto</a></li>
	<li>
	<h3 class="owb"><a href="owb.php">Outside Waistband</a></h3>
	</li>
	<li><a class="ippos" href="ippos.php">&#39;Ippos Belt Slide</a></li>
	<li><a class="swspecial" href="swspecial.php">SW Special</a></li>
	<li>
	<h3 class="tsr"><a href="tsr.php">Thigh Rigs and Shoulder Holsters</a></h3>
	</li>
	<li><a class="sporran" href="sporran.php">Sporran Holster</a></li>
	<li><a class="shoulder" href="shoulder.php">Shoulder Holster with Double Mag Carrier</a></li>
	<li><a class="mbrig" href="mbrig.php">MB Chest Rig</a></li>
	<li>
	<h3 class="mcb"><a href="mcb.php">Mag Carriers and Belts</a></h3>
	</li>
	<li><a class="beltslide" href="beltslide.php">Belt Slide Mag Carriers</a></li>
	<li><a class="iwbmag" href="iwbmag.php">IWB Mag Carriers</a></li>
	<li><a class="shooterbelt" href="shooterbelt.php">Shooters Belt</a></li>
	<li>
	<h3 class="custom"><a href="custom.php">Custom Orders</a></h3>
	</li>
	<li><a class="exotics" href="/exotics.php">Exotics</a></li>
	<li><a class="artwork" href="artwork.php">Artwork</a></li>
	<li>
	<h3 class="custom"><a href="requests.php">By Request Only</a></h3>
	</li>
	<li><a class="mjolnir" href="mjolnir.php">Mjolnir</a></li>
	<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"
}
	

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
	
	
}
</script>


    <script>
$(document).ready(function(){
$("html").click(function(){
$(".sidenav").toggle();
});
});
</script>
	


<nav class="sidenav" id="mySidenav"><a class="closebtn" href="javascript:void(0)" onclick="closeNav()">&times;</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">&#39;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>

由于

1 个答案:

答案 0 :(得分：0)

只需使用.quote类代替html选择器而不是show()方法代替toggle()，并使用e.stopPropagation()代替sidenav和{ {1}}类可以在不隐藏菜单的情况下单击它们及其中的元素。请参阅下面的工作代码：

quote
function openNav() {
  document.getElementById("mySidenav").style.width = "230px"
}


function closeNav() {
  document.getElementById("mySidenav").style.width = "0";


}
$(document).ready(function() {
  $('html').click(function() {
    $(".sidenav").hide();
  });
  $(".quote").click(function(e) {
    e.stopPropagation();
    $(".sidenav").show();
  });
  $(".sidenav").click(function(e) {
    e.stopPropagation();
  });
});
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #e6cfa0;
  overflow-x: hidden;
  transition: .3s;
  bottom: 0;
}

.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;
  padding-left: 20px;
}

.sidenav a:hover,
.offcanvas a:focus {
  color: #c9bb89;
}

.sidenav .closebtn {
  position: sticky;
  top: 0;
  font-size: 36px;
  margin-left: 155px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 10px;
  }
  .sidenav a {
    font-size: 12px;
  }
}

相关问题
最新问题