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>