jquery - 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>