代码之家 › 专栏 › 技术社区 › totitechcare

如何在单击后关闭侧栏

css jquery html

totitechcare · 技术社区 · 1 年前

所以我不确定这到底是如何工作的,但事情是这样的。所以我想在用户点击菜单链接项或正文上的任何地方后关闭菜单侧栏,然后在按下菜单图标时再次打开。我认为这是一个简单的答案,但我所尝试的似乎是一种全力以赴的方法。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content= "width=device-width, initial-scale=1.0"> 

<style>
 
 /* the side menu */
 .sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  border: 1px solid black;
 }
.sidenav a {
  padding: 3px;
 margin: 5px;
  text-decoration: none;
  font-size: .9em;;
  color: black;
  display: block;
  transition: 0.3s;
}
</style>





 
 <div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">cars</a>
<a href="#">planes</a>
<a href="#">boats</a>
<a href="#">cycles</a>
</div>
 
<span style="font-size:1.5em;cursor:pointer" onclick="openNav()">&#9776;</span>
<body>
<p>some random text some random textsome random textsome random text</p>
<p>some random text some random textsome random textsome random text</p>
<p>some random text some random textsome random textsome random text</p>
 
</body>
 
<script>
$(document).ready(function(){
    $('body').on('click',function(){
        $('#mySidenav').css('width', '0px');
    });
}); 
</script> 
 
<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>

当用户点击打开菜单侧边栏并选择菜单项时,或者在正文区域中,侧边栏必须再次关闭。我看了一下建议的答案,我必须说,这些答案似乎都很令人望而生畏,也许是因为我缺乏理解。

1 回复 | 直到 1 年前

mmk 1 年前

你可以查一下 event.target 了解在听点击事件时实际点击了哪个元素 Body 当抽屉不是侧杆开启器时,关闭抽屉。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content= "width=device-width, initial-scale=1.0"> 

<style>
 
 /* the side menu */
 .sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  border: 1px solid black;
 }
.sidenav a {
  padding: 3px;
 margin: 5px;
  text-decoration: none;
  font-size: .9em;;
  color: black;
  display: block;
  transition: 0.3s;
}
</style>





 
 <div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">cars</a>
<a href="#">planes</a>
<a href="#">boats</a>
<a href="#">cycles</a>
</div>
 
<span id="drawer-opener" style="font-size:1.5em;cursor:pointer" onclick="openNav()">&#9776;</span>
<body>
<p>some random text some random textsome random textsome random text</p>
<p>some random text some random textsome random textsome random text</p>
<p>some random text some random textsome random textsome random text</p>
 
</body>
 
<script>
$(document).ready(function(){
    $('body').on('click',function(e){
        if(!$(e.target).is('span#drawer-opener')) {
           $('#mySidenav').css('width', '0px');
        }
    });
}); 
</script> 
 
<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>