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，因此在$a之前声明您的变量click ..赞

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

<强>第三

您已将标志变量声明为$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;
    }
});

Live Demo

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 个答案: