如何制作一個簡單的Jquery滑動菜單？

Question

我是JQuery的新手。 我想構建一個非常簡單的滑動菜單，從瀏覽器的左側滑入。 我有兩個div，當我點擊#div2時我希望菜單滑入，當我再次點擊它時重新進入。 這是我的JQuery代碼：

    $("div2").click(function(){
    $a = 0;
    if ($a == 0){
        $(this).css({"left":"100px"});
        $("#div1").css({"left":"0px"});
        a = 1;
    }else
    {
        $(this).css({"left":"0px"});
        $("#div1").css({"left":"-100px"});
        a = 0;
    }
});

這是我的HTML代碼：

 <div id="div1" style="background-color:#0066CC; position:fixed; width: 100px; height: 500px;left:-100px; top: 50%; margin-top: -250px " ></div>
 <div id="div2" style="background-color:#093; position:fixed; width: 25px; height: 100px;left:0px; top: 50%; margin-top: -50px " ></div>

我嘗試了所有我發現但沒有結果的東西。 提前致謝。

Answer 1

一些問題在你的代碼中

第一：

$("div2").click(function(){

你應該通過id或class調用你的div ..所以你的代碼應該是

$("#div2").click(function(){

第二個 ：

對於維護標志值$a ...它應該聲明為global因此在click之前聲明你的變量$a 。就像

$a = 0;
$("#div2").click(function(){

第三

你已經將flag變量聲明為$a但是在代碼中你使用a ...所以它應該是

$a = 1; 
$a = 0;

最后是你的jQuery代碼

$a = 0;
$("#div2").click(function(){  
    if ($a == 0){
        $(this).css({"left":"100px"});
        $("#div1").css({"left":"0px"});
        $a = 1;
    }else
    {
        $(this).css({"left":"0px"});
        $("#div1").css({"left":"-100px"});
        $a = 0;
    }
});

現場演示

Answer 2

試試這段代碼

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">      </script>


<script>
function show() {
    $("#div2").animate({ width: "100px" }, 500);
}
function hide() {
    $("#div2").animate({ width: "0px" }, 500);

}

 </script>
 </head>
 <body>

<div id="div1" style="background-color:#98bf21;height:100px;width:10px;position:absolute;" onclick="show();"></div>
 <div id="div2" style="background-color:red;height:100px;width:0px;position:absolute" onclick="hide()"></div>

</body>
</html>

如何制作一個簡單的Jquery滑動菜單？

問題描述

2 個解決方案

解決方案1
1 已采納 2013-12-02 07:29:33

解決方案2
1 2013-12-02 07:37:24

如何制作一個簡單的Jquery滑動菜單？

問題描述

2 個解決方案

解決方案1 1 已采納 2013-12-02 07:29:33

解決方案2 1 2013-12-02 07:37:24

解決方案1
1 已采納 2013-12-02 07:29:33

解決方案2
1 2013-12-02 07:37:24