Переключение Jquery с использованием 2 элементов

Question

это мой сценарий, я использую переключатель, чтобы я мог анимировать скользящее меню.

    $("div.show-menu").click().toggle(
        function() {
            // first alternation
            $("#slideover").animate({
                right: "512px"
                }, 300);
            $(".menu-button").html('close menu');


        }, function() {
            // second alternation
            $("#slideover").animate({
                right: "0"
                }, 300);
            $(".menu-button").html('open menu');

    });

Хотя мне действительно нужен переключатель, чтобы использовать 2 элемента на странице.Например, см. Ниже ...

<div class="show-menu one">open menu</div> // this is element one

<div class="show-menu two">open menu</div> // this is element two

Мне это нужно, поэтому, если первый элемент получает щелчок первым, вы можете закрыть меню, используя второй элемент при первом нажатии.Что происходит сейчас, так это то, что вам нужно дважды щелкнуть по элементу два, чтобы он закрыл меню - наоборот

Полагаю, это переключение, вступающее в игру, любая помощь будет великолепна, спасибо.

Ура Джош

Answer 1

$('.show-menu').on('click', function () {

    //check the state of the .menu-button, if it's closed then run the open animation, if it's open then run the close animation
    if ($(".menu-button").html() == 'close menu') {
        $("#slideover").animate({
            right: "0"
        }, 300);
        $(".menu-button").html('open menu');
    } else {
        $("#slideover").animate({
            right: "512px"
        }, 300);
        $(".menu-button").html('close menu');
    }
});

.on() является новым в jQuery 1.7 и заменяет .bind() в этом случае, если вы используете jQuery <1.7, тогда используйте <code>.bind().

Answer 2

А как же

$('.show-menu').on('click', function () {
    if ($("#slideover").css("right") == '512px') {
        $("#slideover").animate({
            right: "0"
        }, 300);
        $(".menu-button").html('open menu');

    } else {
        $("#slideover").animate({
            right: "512px"
        }, 300);
        $(".menu-button").html('close menu');
    }
});