如何使用jQuery创建滑动菜单（从右到左/从左到右）

Question

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

JS小提琴：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.'); 
    }); 
}); 

Answer 1

尝试与此一改变你的JS可能会有所帮助

$('.asideMenu').click(function() { 
 
    var clicks = $(this).data('clicks'); 
 
    if (clicks) { 
 
    $(this).css({ 
 
    \t 'left':'-10px' 
 
    }); 
 
    $(this).html('<span class="openMenu"> open menu -> </span>'); 
 
    } else { 
 
    $('.asideMenu').css({ 
 
    \t '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>

Answer 2

这是一个工作例子，你可以阐述它根据自己的需要申请。希望能帮助到你。

$('.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>