Question

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

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.');
  });
});

Answer 1

这是一个工作示例，您可以根据自己的需要详细说明。希望它有所帮助。

＆＃13;

$('.asideMenu').on('click', function() {
  if ($(this).hasClass('menuClosed')) {
    $(this).removeClass('menuClosed');
  } else {
    $(this).addClass('menuClosed');
  }
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试用这个改变你的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>

如何使用jQuery创建幻灯片菜单（从右到左/从左到右）

2 个答案: