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'); 
    } 
});