2

我正在使用标准：

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

显示和隐藏一个 div，但是当网站设置为display:none;div 时，我的所有内容都会在页面上移动。

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

4

5 回答 5

2

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

于 2012-10-31T14:52:48.410 回答
1

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

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

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

或者也试试

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

于 2012-10-31T14:52:01.503 回答
0

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

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

像这样再次显示它：

$('div.#showhide').css('visibility', 'visible');
于 2012-10-31T14:55:08.210 回答
0

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

于 2012-10-31T14:57:23.583 回答
0

也许试试这个：

$(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() && jQuery .toggle() [事件]中查看更多信息

于 2012-10-31T14:57:56.117 回答