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

我需要它，如果首先單擊元素1，則可以在第一次單擊時使用元素2關閉菜單。 現在發生的事情是您必須兩次單擊元素兩次才能關閉菜單-反之亦然

我想這是撥動開關，任何幫助將非常感謝。

干杯喬希

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以下，請使用.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');
    }
});