如何用jQuery创建幻灯片菜单(从右到左/从左到右)

how to create a slide menu ( right to left / left to right ) with jQuery

本文关键字：从右到左 从左到右 菜单 何用 jQuery 创建 幻灯片      更新时间：2023-09-26

我试图用jQuery创建一个幻灯片菜单。默认情况下，当页面加载时菜单是打开的。当我点击它，菜单从右到左滑动。但我不知道怎么把它推到默认位置。或者我们如何来回推它

JS Fiddle: http://jsfiddle.net/pPf7N/307/

HTML 

<aside class="asideMenu">
 i'm the menu click me
</aside>
jQuery 

$('.asideMenu').on('click', function(){
  $(this).css({
   'left':'-200px'
  });
  $(this).html('<span class="openMenu"> open menu -> </span>');
  $('.openMenu').on('click', function(){
   alert('want to push the menu to its default position.');
  });
});

尝试用这个来改变你的JS，它可能会有帮助

$('.asideMenu').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     $(this).css({
  	'left':'-10px'
  });
  $(this).html('<span class="openMenu"> open menu -> </span>');
  } else {
     $('.asideMenu').css({
  	'left':'-200px'
  });
  }
  $(this).data("clicks", !clicks);
});
aside{
  height:900px;
  width:300px;
  position:absolute;
  background-color:#ddd;
  margin:0px;
  padding:0px;
  cursor:pointer;
  transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
}
.openMenu{
  color:#000;
  float:right;
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="asideMenu">
i'm the menu click me
  
</aside>

这是一个工作示例，您可以根据自己的需要对其进行细化。希望能有所帮助。

$('.asideMenu').on('click', function() {
  if ($(this).hasClass('menuClosed')) {
    $(this).removeClass('menuClosed');
  } else {
    $(this).addClass('menuClosed');
  }
});
aside {
  height: 900px;
  width: 300px;
  position: absolute;
  background-color: #ddd;
  margin: 0px;
  padding: 0px;
  left: 0px;
  cursor: pointer;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.menuClosed {
  left: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<aside class="asideMenu">
  i'm the menu click me
</aside>

相关文章：