Проблема Jquery slideToggle

<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. Как анимировать его, чтобы скользить слева направо?

jquery slidetoggle
person mjeczyk    schedule 24.03.2010    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы не можете использовать одно и то же значение «id» для обоих этих элементов <a>. Вы дали им разные значения «класса»; возможно, вам следует поменять местами значения для атрибутов «класс» и «идентификатор».

person Pointy    schedule 24.03.2010

arrow_upward
0
arrow_downward

Во-первых, вы не можете иметь одинаковый идентификатор для двух элементов. Во-вторых, собственная анимация слайдов 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>
person Community    schedule 18.02.2013