0

我有以下 HTML：

<section id="sidebar" class="grid_3">
<section id="content" class="grid_9">

我使用 jQuery 将其更改为：

<section id="sidebar" class="" style="width: 0px;">
<section id="content" class="grid_12">

但是，似乎带有侧边栏 id 的部分仍然有一些宽度，并且其中的元素出现了。

有什么方法可以让 id=sidebar 的内容使用 jQuery 不可见？我认为给它一个 0px 的宽度可以使它工作，但似乎没有。我想知道将显示设置为隐藏或可见，但我不确定隐藏和可见之间的区别？也不确定 jQuery 的显示和隐藏。在这种情况下哪个最好？

4

4 回答 4

2 
$("#sidebar").hide() // sets the position of the element to `display: none`;
$("#sidebar").show() // sets the position of the element to `display: block`;
$("#sidebar").css('width', '0 !important') // sets the width of the element to `0` and overrides other element's width properties;
$("#sidebar").css('visibility', 'hidden') // The element is invisible but still takes up space;

how can I detect if the display is set to "none" with jQuery?

尝试这个：

if ($('.grid_3').is(':hidden')) { // if the element is hidden do something here}
if ($('.grid_3').is(':visible')) { // if the element is visible do something here}
于 2012-07-01T06:38:35.113 回答
1

visibility: hidden隐藏元素但保留在文档流中。display: none将从常规流中隐藏和删除元素。opacity: 0可以在其他情况下使用。在某些情况下使用的另一个选项是position: absolute元素并通过将其移动到一侧来隐藏它left: -9999px。选择其中一个选项，width: 0至少在我的经验中不适合任何情况。

于 2012-07-01T06:36:14.703 回答
0

$('#sidebar').hide()将隐藏侧边栏，但您必须知道（正如@elclanrs 解释的那样）这会从文档流中删除该元素，因此如果侧边栏的存在是您的布局工作所必需的，请使用$('#sidebar').css('visibility', 'none').

于 2012-07-01T06:41:00.690 回答
0

正如其他人指出的：

  • visibility: hidden;: 隐藏元素及其内容，但一直占用空间（就像设置一样opacity: 0;）；
  • display: none;：隐藏对象并将其从流程中移除，为其他元素释放空间（例如：如果您在上面的元素上设置它，下面的元素将向上移动以占据其空间）；

要将元素设置为宽度为零并隐藏您需要将overflow属性设置为的内容hidden

  • overflow: hidden: 隐藏溢出的内容（扩展超出其父级的边界），防止它出现在其父级之外。

使用 jQuery，我建议使用animate()来完成任务：

$("#sidebar").css("overflow", "hidden").animate({ width: "hide" }, "fast");

您可以在此处使用“切换”或“显示”作为宽度参数。

于 2012-07-01T07:02:54.140 回答