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>