div将SlideDown但不会slideUp [英] div will slideDown but it won't slideUp

问题描述

我正在尝试使用toggle，slideUp和slideDown显示和隐藏一系列div.我可以将div放到slideDown上，但不能将它放到slideUp上.之前我已经使用了这个脚本而没有发生任何事情，所以我对为什么它不起作用感到非常困惑.我已经包含了我的脚本和我要显示和隐藏的div.

快速说明:当我在隐藏的车辆" div中放置常规的旧p标签时，效果很好.它像预期的那样显示和隐藏.但是，当我将表格放回该div时，它不起作用.

<script type="text/javascript">
$(document).ready(function() {
    $(".ShowVehicles").toggle(function() {
        $(".HiddenVehicles").slideDown(2000);
        $(this).text("Hide All");
    }, function () {
        $(".HiddenVehicles").slideUp(2000);
        $(this).text("Show All");                
    });
});

<div class="HiddenVehicles" style="display:none; width:730px;">
    (there will be a giant table in here)
    </div>

解决方案

我将此建议作为评论发布，它有助于解决该问题，因此我将其再次发布在这里:

当slideUp/slideDown动画只能以一种方式工作时，通常是定位错误.您要设置动画的元素需要设置为position:relative，或者该元素的子元素应用了float，并且没有赋予父元素真正的高度.

我会尝试将float:none添加到表中.如果这样不起作用，请尝试将position:relative添加到div#HiddenVehicles.

I am attempting to show and hide a series of divs using toggle, slideUp and slideDown. I am able to get the div to slideDown but I can't get it to slideUp. I've used this script without incident before so I'm really confused as to why this isn't working. I have included my script and the div I'm attempting to show and hide.

Quick Note: When I put a regular old p tag in the "hidden vehicles" div, it worked fine. It was showing and hiding like it was supposed to. However, when I put my table back into that div, it didn't work.

<script type="text/javascript">
$(document).ready(function() {
    $(".ShowVehicles").toggle(function() {
        $(".HiddenVehicles").slideDown(2000);
        $(this).text("Hide All");
    }, function () {
        $(".HiddenVehicles").slideUp(2000);
        $(this).text("Show All");                
    });
});

<div class="HiddenVehicles" style="display:none; width:730px;">
    (there will be a giant table in here)
    </div>

解决方案

I posted this advice as a comment, and it helped to fix the problem so I am posting it again here:

When slideUp/slideDown animations only work one way, it is often a positioning bug. Either the element you are animating needs to be set to position:relative or the children of the element have a float applied to them and are not giving the parent element true height.

I would try adding float:none to the table. If that doesn't work try adding position:relative to the div#HiddenVehicles.

这篇关于div将SlideDown但不会slideUp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！