Question

我目前有一个简单的列表导航，用户点击该导航，导航向下滑动并向上滑动关闭。我想知道是否有一种方法可以让导航列表向左滑动打开然后向右滑动以关闭列表导航。使用我当前的jquery代码可以修改它，左边的列表导航滑动打开然后向右滑动关闭。任何帮助将不胜感激！谢谢！这是我当前的代码并链接到我的js fiddle http://jsfiddle.net/jsavage/eGAYt/

这是我的jquery代码。

$(function(){
 var $menuContent = $(".list-menu, .list-menu-registration");
 $("#menu-list-btn").click(function(e){
   e.preventDefault();
   if($menuContent.hasClass('opened')){
    $menuContent.slideUp('slow').toggleClass('closed opened');
  } else {
    $menuContent.slideDown('slow').toggleClass('closed opened');
  }
 });
 });

Answer 1

您可以使用动画和边距从右向左滑动。

.drop-down-nav {
    float: left;
    width: 640px; 
    height: 159px;
    background-color:grey;  
    padding: 1px 0;
    opacity:0;
    margin-left:600px;
    clear: both;

}

jquery的：

var $itemContent = $('.drop-down-nav');
$('.drop-down-btn-up, .drop-down-btn').click(function(e){
  e.preventDefault();
    if($itemContent.css('margin-left') == "600px"){
         $('.drop-down-nav').animate({
                  marginLeft: '0px',
                  opacity:1
              })

    } else {
         $('.drop-down-nav').animate({
                  marginLeft: '600px',
                  opacity:0
              });
    }
});

http://jsfiddle.net/QmEcs/8/

列表导航向左滑动打开，向右滑动以关闭

1 个答案: