Question

我正在使用标准：

$(document).ready(function() {
   $('#toggleme').click(function(){
     $('div.#showhide').toggle();
   });
 $('#closer').click(function(){
     $('div.#showhide').toggle();
   });
 });

要显示和隐藏div，但当网站设置为display:none;时，div会消失并且我的所有内容都会向上移动。

是否有不同的显示/隐藏div的方法，或者我应该将每个div包装在具有固定宽度/高度的父div中？

Answer 1

CSS属性visibility: hidden;就是你想要的，它会像显示块一样隐藏它，但空间仍然存在，所以没有内容移动。

Answer 2

为此使用.show()和hide()方法

.show() - 显示匹配的元素。

.hide() - 隐藏匹配的元素。

或尝试

.toggle() - 显示或隐藏匹配的元素

Answer 3

将可见性设置为隐藏，如下所示：

$('div.#showhide').css('visibility', 'hidden');

再次显示：

$('div.#showhide').css('visibility', 'visible');

Answer 4

您可以使用jQuery.show()和jQuery.hide()方法分别显示和隐藏元素。

Answer 5

也许试试这个：

$(document).ready(function() {

    $('#toggleme').toggle(function(){
        $('.showhide').animate({ "height", "0px" });
    },
    function(){
        $('.showhide').animate({ "height", "SomeBaseHeightpx" });
    });

    $('#closer').toggle(function(){
        $('.showhide').animate({ "height", "0px" });
    },
    function(){
        $('.showhide').animate({ "height", "SomeBaseHeightpx" });
    });

});

使用它并将其调整为HTML，但这应该完全符合您的要求。

详情请见jQuery .animate()＆amp;＆amp; jQuery .toggle() [event]

使用jQuery隐藏和显示DIV而不使用display：none

5 个答案: