不使用開關滑動的菜單

我試着讓菜單向左滑動，然後按一下按鈕，然後滑回原來的位置。我正在使用切換，但我似乎無法讓它工作。該按鈕也會向右滑動，以便在菜單沒有時可見。如果沒有切換方法，菜單和按鈕可以正確滑動，但不要向後滑動。不使用開關滑動的菜單

JQuery的：

$("#menu-button").click(function() { 
    $("#menu-button").toggle(function() { 
     $("#menu").animate({ 
      "left": "-=300px" 
     }, "slow"); 
     $("#menu-button").animate({ 
      "right": "-=60px" 
     }, "slow"); 

    }, 

    function() { 

     $("#menu").animate({ 
      "left": "+=300px" 
     }, "slow"); 
     $("#menu-button").animate({ 
      "right": "-=60px" 
     }, "slow"); 

    } 
});

}）;

HTML：

<div id="menu"> 
<button id="menu-button">press</button> 
</div>

CSS：

#menu { 

    width: 300px; 
    height: 500px; 
    background-color: black; 
    position: absolute; 
    left: 0; 
} 

#menu-button { 
    width: 48px; 
    height: 48px; 
    background-color: red; 
    float: right; 
    margin: 10px; 
    text-align: center; 
    cursor:pointer; 
    position: relative; 
}

來源

2016-07-07 GoMega54

您使用jQuery的哪個版本？根據[.toggle（）文檔]（http://api.jquery.com/toggle/），它隱藏了被調用的元素。所以即使它會回退，它也不會被看到。（[Jsfiffle]（https://jsfiddle.net/hs3eu7pj/4/）的代碼與最新的jQuery） – Abaddon666

而是撥動的，我覺得最簡單的，可能年後，審查代碼是明確的。個人偏好是使用var來存儲當前的div狀態。 個人喜好。。。但它的工作原理。

var menuOut = true; 
 
$("#menu-button").click(function() { 
 
    if (menuOut){ 
 
     menuOut = false; 
 
     $("#menu").animate({ 
 
     "left": "-300px" 
 
     }, "slow"); 
 
     $("#menu-button").animate({ 
 
     "left": "60px" 
 
     }, "slow"); 
 
    }else{ 
 
     menuOut = true; 
 
     $("#menu").animate({ 
 
     "left": 0 
 
     }, "slow"); 
 
     $("#menu-button").animate({ 
 
     "left": 0 
 
     }, "slow"); 
 
    } 
 
});

#menu { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 300px; 
 
    height: 500px; 
 
    background-color: darkcyan; 
 
} 
 
#menu-button { 
 
    position: relative; 
 
    width: 48px; 
 
    height: 48px; 
 
    background-color: red; 
 
    float: right; 
 
    margin: 10px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="menu"> 
 
<button id="menu-button">press</button> 
 
</div>

來源

2016-07-07 23:01:44 gibberish

不使用開關滑動的菜單

回答

相關問題