0

我目前有一个简单的列表导航,用户单击它,导航向下滑动并向上滑动以关闭。我想知道是否有办法让导航列表向左滑动以打开然后向右滑动以关闭列表导航。使用我当前的 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');
  }
 });
 });
4

1 回答 1

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/

于 2013-07-29T02:14:08.333 回答