9

displayjQuery在简单show()和hide()函数的底层使用 CSS属性。下面的 HTML 包含三个按钮，每个按钮都包含在一个<span>标签中，并且所有三个<span>标签都放置在一个父<div>容器中。在页面加载时，<span>使用 jQuery 隐藏标签hide()，稍后，它们会使用该show()函数显示。HTML 现在处于以下状态，<span>标记已收到样式值display: block;。

<div style="text-align:right; width:100%;">
    <span style="display:block">
        <input type="button" value="Button1" />
    </span>
    <span style="display:block">
        <input type="button" value="Button2" />
    </span>
    <span style="display:block">
        <input type="button" value="Button3" />
    </span>
</div>

在 Firefox (3.5) 中，span 元素垂直堆叠在一起，而在 IE 中，它们显示为内联。我本来希望在两个浏览器中都使用后者，因为我认为 span 标签的默认布局是内联的。

如果我手动将样式从 更改display:block为display: inline;，它在 Firefox 中看起来是正确的。本质上，当显示一个元素时，jQuery 使用的值display并不总是有效的。添加display: block; 足以显示元素，但不足以用我需要的内联布局显示它。

所以，对于我的问题：

  1. 这是 jQuery 的一个已知问题吗？我正在使用 jQuery 1.2.6。
  2. 以前有没有人遇到过这个问题，您是如何解决的？
4

4 回答 4

9

起初，从回复看来，如果我想要的值display不是block.

但是，我随后注意到，当<span>标签处于隐藏状态时，jQueryoldBlock为每个标签添加了一个属性。然后我意识到这是为了在display隐藏元素时临时存储 CSS 值，以便在元素再次显示时可以恢复适当的值。

因此，我所要做的就是在隐藏元素之前设置适当的显示值。

初始状态：

<div style="text-align:right; width:100%;">
    <span style="display:inline">
        <input type="button" value="Button1" />
    </span>
    ...
</div>

调用.hide()将我们带到这个状态：

<div style="text-align:right; width:100%;">
    <span style="display:none" oldBlock="inline">
        <input type="button" value="Button1" />
    </span>
    ...
</div>

调用show()使我们回到这种状态：

<div style="text-align:right; width:100%;">
    <span style="display:inline">
        <input type="button" value="Button1" />
    </span>
    ...
</div>

主要问题是我在初始状态下没有给<span>元素赋值。display因此，他们将隐式接收浏览器默认值，这似乎与inline我预期的一样。但是，如果您在调用函数之前oldBlock明确设置了值，jQuery 只会使用该属性。如果没有属性，则函数使用默认值。display hide()oldBlockshow()block

于 2009-11-16T13:50:53.650 回答
3

而不是使用显示/隐藏使用 addClass/removeClass 并使用该类设置您希望应用的样式。

.hidden
{
    display: none;
}

.inline
{
    display: inline;
}

.block
{
    display: block;
}

示例用法：

$('.menuitem').hover(
      function() {
           $(this).parent()
                  .find('span')
                  .removeClass('inline block')
                  .addClass('hidden');
           $(this).addClass('inline');
      },
      function() {
           $(this).addClass('inline');
      }
});
于 2009-11-16T13:07:19.633 回答
3

我没有遇到这个问题，但是如果需要，可以像这样显式设置 css 属性：

$(this).show('fast').css("display","inline");
于 2009-11-16T13:17:04.263 回答
1

我没有遇到过这个具体问题，但为了获得更多控制权，请使用 .toggleClass()

于 2009-11-16T13:08:09.847 回答