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然後使用.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'); 
    } 
});