Onclick div左右移动，在窗口上单击返回到其原始位置

Question

我正在做侧边菜单，我想使用loop。我尝试但没有得到。 我的问题是在图标上单击div移到右侧，一段时间后返回其原始位置。 如果鼠标悬停在div完全展开时，则不应left:-201;移动left:-201;

要获取灵感，请参阅他的侧边菜单

 document.ready(function(){ $('a.is-vertical-toggle-icon .fa-bars').click(function(){ $('header.is-vertical-toggle .header-menu').animate({'left':'0'}); $('a.is-vertical-toggle-icon .fa-bars').hide(); $(window).click(function(){ $('header.is-vertical-toggle .header-menu').animate({'left':'-201'}); $('a.is-vertical-toggle-icon .fa-bars').show(); }); }); }); 

 .wrapper { position: relative; width: 100%; } header.is-vertical-toggle .header-menu { position: fixed; top: 0; left: -201px; padding: 0; width: 250px; height: 100%; background-color: #ccc; -webkit-box-shadow: 2px 0 4px 2px rgba(0,0,0,.15); box-shadow: 2px 0 4px 2px rgba(0,0,0,.15); } a.is-vertical-toggle-icon { display: flex; justify-content: flex-end; margin-top: 35px; padding: 10px 15px; } a.is-vertical-toggle-icon .fa-bars { font-size: 23px; color: #00807F; } 

 <script src="https://use.fontawesome.com/a2e210f715.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <header class=" is-vertical is-vertical-toggle"> <div class="header-menu"> <a href="#" class="is-vertical-toggle-icon"> <span><i class="fa fa-bars"></i></span> </a> </div> </header> 

Answer 1

使用您的代码，将执行$('a.is-vertical-toggle-icon .fa-bars').click(和$(window).click( $('a.is-vertical-toggle-icon .fa-bars').click(这两个事件。

这里e.target != $menu[0]如果clicked元素是菜单，它将不执行window.click处理程序

 $(document).ready(function(){ $('a.is-vertical-toggle-icon .fa-bars').click(function(){ var $menu = $(this); $('header.is-vertical-toggle .header-menu').animate({'left':'0'}); $('a.is-vertical-toggle-icon .fa-bars').hide(); $(window).click(function(e){ if(e.target != $menu[0]) { $('header.is-vertical-toggle .header-menu').animate({'left':'-201'}); $('a.is-vertical-toggle-icon .fa-bars').show(); } }); }); }); 

 .wrapper { position: relative; width: 100%; } header.is-vertical-toggle .header-menu { position: fixed; top: 0; left: -201px; padding: 0; width: 250px; height: 100%; background-color: #ccc; -webkit-box-shadow: 2px 0 4px 2px rgba(0,0,0,.15); box-shadow: 2px 0 4px 2px rgba(0,0,0,.15); } a.is-vertical-toggle-icon { display: flex; justify-content: flex-end; margin-top: 35px; padding: 10px 15px; } a.is-vertical-toggle-icon .fa-bars { font-size: 23px; color: #00807F; } 

 <script src="https://use.fontawesome.com/a2e210f715.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <header class=" is-vertical is-vertical-toggle"> <div class="header-menu"> <a href="#" class="is-vertical-toggle-icon"> <span><i class="fa fa-bars"></i></span> </a> </div> </header> 

Answer 2

好的，在访问参考网站后，您可以设置一个具有1秒延迟的setTimeout ，并且当鼠标悬停在侧边栏上时，我们清除超时，而在鼠标超时时，我们重新应用超时，请参考以下代码！

 var timeout; function hide() { timeout = setTimeout(function() { $('header.is-vertical-toggle .header-menu').animate({ 'left': '-201' }); $('a.is-vertical-toggle-icon .fa-bars').show(); }, 1000); } $('a.is-vertical-toggle-icon .fa-bars').click(function() { $('header.is-vertical-toggle .header-menu').animate({ 'left': '0' }); event.stopPropagation(); $('a.is-vertical-toggle-icon .fa-bars').hide(); hide(); }); $(window).click(function() { $('header.is-vertical-toggle .header-menu').animate({ 'left': '-201' }); $('a.is-vertical-toggle-icon .fa-bars').show(); }); $('.header-menu').on("mouseover", function() { clearTimeout(timeout); }); $('.header-menu').on("mouseleave", function() { event.stopPropagation(); hide(); }); 

 .wrapper { position: relative; width: 100%; } header.is-vertical-toggle .header-menu { position: fixed; top: 0; left: -201px; padding: 0; width: 250px; height: 100%; background-color: #ccc; -webkit-box-shadow: 2px 0 4px 2px rgba(0, 0, 0, .15); box-shadow: 2px 0 4px 2px rgba(0, 0, 0, .15); } a.is-vertical-toggle-icon { display: flex; justify-content: flex-end; margin-top: 35px; padding: 10px 15px; } a.is-vertical-toggle-icon .fa-bars { font-size: 23px; color: #00807F; } 

 <script src="https://use.fontawesome.com/a2e210f715.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <header class=" is-vertical is-vertical-toggle"> <div class="header-menu"> <a href="#" class="is-vertical-toggle-icon"> <span><i class="fa fa-bars"></i></span> </a> </div> </header>