Как сделать простое скользящее меню Jquery?

Question

Как сделать простое скользящее меню Jquery?

0

Я очень новичок в 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>

Я пробовал все, что нашел, но никакого результата. заранее спасибо.

Ali Bordbar 02 дек. 2013, в 08:44

Источник

0

что-то вроде этого stackoverflow.com/questions/19392453/…
Jobin Jose 02 дек. 2013, в 07:35

Теги:

jquery

html

2 ответа

1

попробуйте этот код

<!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>

Anoop Joshi 02 дек. 2013, в 06:33

Ещё вопросы

что-то вроде этого stackoverflow.com/questions/19392453/…

rynhe · Accepted Answer · 2013-12-02T05-13-00.000Z

Некоторые проблемы в коде ur

сначала:

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

вы должны вызвать ur div по id или class. так что код ur должен быть

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

второй:

Для поддержания значения флага $a... он должен быть объявлен как global поэтому объявите переменную ur $a перед click.. like

$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

большое Вам спасибо. но что это за "console.log ($ a)" и "console.log (" sdfDS ")"?
Поскольку вы новичок в jQuery, я бы посоветовал вам не использовать знак $ для именования переменных. Знак $ должен использоваться, чтобы отличить объекты jQuery от других переменных. ех. var $div2 = $('#div2'), a = 0;
@MarkS .... Али Бордбар использовал $ a, поэтому я объявил то же самое ....