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>