Question

我有一个带有切换按钮的div侧边栏，可以从左侧滑出。我在网上搜索了一个Jquery脚本，这个脚本可以让我关闭这个边栏，点击网页上的任何地方，找不到对我有用的东西。

以下是我现在使用的jQuery：

$(document).ready(function(){
$('.toggle_sidebar').click(function(){
    $('#sidebar_extended').toggle("500");
});
    });

CSS：

#sidebar_extended{
width:180px;
position:absolute;
min-height: 100%;
height:100%;
left:0;
margin:0 10px 0 0;
padding:0;
background:#3a3b3c; 
display: none;
z-index: 5000;
color: #fff;
text-indent: 10px;}

HTML：

<div id="toggle">
  <a href="#sidebar_extended" class="toggle_sidebar">
    <img src="images/toggle.png" alt="toggle">
  </a>
</div>

<div id="sidebar_extended">
  Sidebar content
</div>

Answer 1

对于隐藏部分，请尝试：

$(document).mouseup(function (e){
  if (e.target.id != "sidebar_extended"){
    $('#sidebar_extended').toggle("500");
  }
}

对于更强大的解决方案，请看一下： https://stackoverflow.com/a/7385673/644669

单击切换div以外的任何位置以关闭

1 个答案: