代码之家 › 专栏 › 技术社区 › Andy McCluggage hunter

jquery显示/隐藏-CSS显示值正在影响我的布局

show-hide css jquery

Andy McCluggage hunter · 技术社区 · 15 年前

jquery使用CSS display 在简易程序的框架下的属性 show() 和 hide() 功能。下面的HTML包含三个按钮,每个按钮包装在 <span> 标签和所有三个 <SPAN & GT; 标记放在父级中 <div> 容器。在页面加载时, <SPAN & GT; 使用jquery隐藏标记 () ,并且在稍后的某个时间点,它们将使用 显示() 功能。HTML现在处于以下状态 <SPAN & GT; 收到样式值的标记 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)中,跨度元素是垂直堆叠在一起的,而在IE中,它们是内联的。在两个浏览器中,我都希望使用后者,因为我认为SPAN标记的默认布局是内联的。

如果我手动更改样式 display:block 到 display: inline; 在火狐中看起来是正确的。实际上,在显示元素时,jquery使用的是 显示 这并不总是有效的。添加 display: block ;足以显示元素,但不足以用我需要的内联布局显示它。

所以,对于我的问题:

这是jquery的已知问题吗?我正在使用jquery 1.2.6。
以前有人遇到过这个问题吗?你是怎么解决的?

4 回复 | 直到 9 年前

TylerH Ash Burlaczenko 9 年前

起初,从响应中似乎可以看出,如果我想要的值是 display 以外 block .

然而,我注意到,当 <span> 标记处于隐藏状态,jquery添加了一个名为 oldBlock 给他们每个人。然后我意识到这是为了临时存储 显示 当元素被隐藏时的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 & GT; 元素的值 显示 在我的初始状态。因此,它们将隐式地接收浏览器默认值,该默认值似乎是 inline 正如我预料的那样。但是,jquery将只使用 老砌块 属性,如果显式设置 显示 之前你称之为 hide() 功能。如果没有 老砌块 属性 显示() 函数使用的默认值为 块 .

tvanfosson 15 年前

不要使用show/hide,而是使用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');
      }
});

Nathan Long 15 年前

我没有遇到这个问题,但是如果需要,您可以显式设置CSS属性,如下所示:

$(this).show('fast').css("display","inline");

ScottE 15 年前

我没有遇到过这个特定的问题,但为了更好地控制,请使用.toggleClass()。