Alternador de jquery usando 2 elementos: javascript, jquery, html, alternar, alternancia

este es mi script, estoy usando una palanca para poder animar un menú deslizante.

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

});

Aunque realmente necesito la palanca para trabajar usando 2 elementos en la página. Por ejemplo, ver más abajo ...

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

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

Lo necesito así, si el elemento uno obtiene el "clic" primero,Puede cerrar el menú utilizando el elemento dos en el primer clic. Lo que está sucediendo ahora es que debe hacer clic en el elemento dos dos veces para que cierre el menú, y viceversa.

Supongo que esta es la palanca que entra en juego, cualquier ayuda sería genial, gracias.

Aclamaciones Josh

Respuestas

$(".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() es nuevo en jQuery 1.7 y reemplaza .bind() en este caso, si está utilizando jQuery <1.7, use .bind().

Qué pasa

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