Jquery toggle mit 2 Elementen - javascript, jquery, html, toggle, alternation

Dies ist mein Skript, ich verwende einen Umschalter, damit ich ein Schiebemenü animieren kann.

    $("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");

});

Allerdings brauche ich wirklich den Toggle, um mit 2 Elementen auf der Seite zu arbeiten. Zum Beispiel siehe unten ...

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

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

Ich brauche es also, wenn element eins zuerst klick bekommt,Sie können das Menü mit Element 2 beim ersten Klick schließen. Jetzt passiert es, dass Sie zweimal auf Element zwei klicken müssen, um das Menü zu schließen - und umgekehrt

Ich denke, dies ist der Knebel, der ins Spiel kommt. Jede Hilfe wäre dankbar.

Prost Josh

Antworten:

$(".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() ist neu in jQuery 1.7 und ersetzt .bind() Wenn Sie in diesem Fall jQuery <1.7 verwenden, verwenden Sie .bind().

Wie wäre es mit

$(".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");
}
});