Question

您好我正在制作一个使用JQuery切换的信息下拉列表。当我点击一个打开其下方的切换div时，它会使另一个li反弹然后弹回原位。我希望他们保持静止。

我添加了一个绝对位置，但随后将其从流中移除，并且在切换div打开时不会向下推动下方的div。切换div然后只覆盖它下面的其他div。

这是我的JQuery：

var open = $('.open'),
a = $('ul').find('a');

console.log(a.hasClass('active'));

open.click(function(e){
e.preventDefault();
var $this = $(this),
    speed = 500;
if($this.hasClass('active') === true) {
    $this.removeClass('active').next('.box').slideUp(speed);
} else if(a.hasClass('active') == false) {
    $this.addClass('active').next('.box').slideDown(speed);
} else {
    a.removeClass('active').next('.box').slideUp(speed);
    $this.addClass('active').next('.box').delay(speed).slideDown(speed);
}

});

})(jQuery);

这是我的HTML：

<div class="grid_12 omega boxes">
    <ul>
        <li id="monday"><a href="javascript:void(0)" class="open"><img src="wp-content/themes/English42/img/mon.svg"></a><div class="box" >THIS IS THE TOGGLE DIV1</div></li>
        <li id="tuesday"><a href="javascript:void(0)" class="open"><img src="wp-content/themes/English42/img/mon.svg"></a><div class="box">THIS IS THE TOGGLE DIV2</div></li>
        <li id="wednesday"><a href="javascript:void(0)" class="open"><img src="wp-content/themes/English42/img/mon.svg"></a><div class="box">THIS IS THE TOGGLE DIV3</div></li>
        <li id="thursday"><a href="javascript:void(0)" class="open"><img src="wp-content/themes/English42/img/mon.svg"></a><div class="box">THIS IS THE TOGGLE DIV4</div></li>
        <li id="friday"><a href="javascript:void(0)" class="open"><img src="wp-content/themes/English42/img/mon.svg"></a><div class="box">THIS IS THE TOGGLE DIV5</div></li>
        <li id="saturday"><a href="javascript:void(0)" class="open"><img src="wp-content/themes/English42/img/mon.svg"></a><div class="box">THIS IS THE TOGGLE DIV6</div></li>
    </ul>

</div>

任何帮助都会很棒。感谢。

JQuery切换li导致其他li反弹

0 个答案: