Jquery slideToggle問題

Question

<script type="text/javascript"> 
$(document).ready(function(){ 
     $("#toggle").toggle(
       function(){ 
         $("#box1").slideToggle(800,function(){ 
           $("#box2").slideToggle(); 
         }); 
       }, 
       function(){ 
         $("#box2").slideToggle(800,function(){ 
           $("#box1").slideToggle(); 
         }); 
       } 
     );   
}); 
</script> 

    <div id="box1"> 
    <a href="#" class="order" id="toggle">&nbsp;</a> 
    </div> 
    <div id="box2" style="display:none;"> 
    <a href="#" class="back" id="toggle">&nbsp;</a> 
    </div> 

1. 它只適用於第一次點擊。當我再次點擊它時，它不會回退。
2. 如何動畫它從左到右滑動？

Answer 1

您不能對這兩個<a>元素使用相同的「id」值。你給了他們不同的「班級」價值觀;也許你應該交換「class」和「id」屬性的值。

Answer 2

首先你不能有兩個元素相同的id。其次，jQuery原生幻燈片動畫僅適用於自上而下的方向。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".toggle.order").click(
      function(){ 
        $("#box1").slideToggle(800,function(){ 
          $("#box2").slideToggle(); 
        }); 
      }); 
    $(".toggle.back").click(
      function(){ 
        $("#box2").slideToggle(800,function(){ 
          $("#box1").slideToggle(); 
        }); 
      });  
}); 
</script> 

<div id="box1"> 
<a href="#" class="order toggle">&nbsp;</a> 
</div> 
<div id="box2" style="display:none;"> 
<a href="#" class="back toggle">&nbsp;</a> 
</div>