div will slideDown but it won't slideUp

偶尔善良 提交于 2019-11-28 08:02:03

问题


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>

回答1:


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.




回答2:


For those without float/positioning problems, I found that upgrading from jQuery 1.10 to 1.11 solved the problem.



来源:https://stackoverflow.com/questions/1750773/div-will-slidedown-but-it-wont-slideup

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!