Onclick div从左向右移动，在窗口单击时返回其原始位置

Posted 2021-03-31

我正在做侧边菜单我想使用loop.I尝试但没有得到。我的问题是关于图标点击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>

答案

看到参考网站后，你可以设置一个延迟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>

另一答案

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

这里e.target != $menu[0]如果点击的元素是菜单，它将不会执行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>

以上是关于Onclick div从左向右移动，在窗口单击时返回其原始位置的主要内容，如果未能解决你的问题，请参考以下文章

Android中的手势滑动

我如何扭转这一点并使其代码从 LED7 开始，也就是最左边的 LED，而不是 LED1，然后从左向右移动？

java运算符的优先级

无法让 div 在 jQuery 中从左到右设置动画

请使用jQuery实现页面中的div元素向右移动100px后回到初始位置的动画效果？

核心动画从左到右