javascript - Onclick div 从左到右移动，在窗口点击返回到它的原始位置

Question

我正在做侧边菜单我想使用循环。我试过了但没有得到。我的问题是图标单击 div 向右移动，一段时间后又回到原来的位置。当鼠标悬停时，当 div 完全展开时，它不应该移动 left:-201;

有关灵感，请参阅他的 side menu

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

在看到引用网站后，您可以设置一个 setTimeout 1s 延迟，当鼠标悬停在侧边栏上时，我们清除超时并在鼠标移出时重新应用超时，请引用下面的代码!

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>