-1

我需要在我的应用程序中展开和折叠按钮。

支持 IE 和 chrome，但 mozilla firefox 显示的图像两侧有小空白。

它设置不正确，我的代码如下。

<div class="searchdiv">
    <b class="searchlabel">Advanced Search</b>
    <input type="button" class="Expand_button" onclick="javascript: Expand();"/>
</div>

而CSS是，

.Expand_button {
    margin-right: 5px;
    cursor: pointer;
    padding-bottom: 10px;
    padding-top: 5px;    
    background: #fff url('../images/Expand.jpg') no-repeat center ;
    height:1px;
}
4

1 回答 1

2

首先，内联 Javascript 不好。这就是所谓的“侵入式 Javascript”。相反，编写您的 Javascript 以便它对某个操作做出反应，并将其保存在一个单独的 Javascript 文件中（为了简洁，jQuery 风格）：

$(document).ready(function(){
    $('input.Expand_button').click(function(){
      Expand();
    });
})

然后删除onclick元素中的调用，如下所示：

<input type="button" class="Expand_button" />

也就是说，您是否试图通过设置使输入不可见height: 1px？如果是这样，那就是你的问题。它仍然存在，并且仍然可见。更重要的是，你有填充和边距，所以当然它仍然会出现。

您想要的是display: none;or visibility: hidden，具体取决于您正在寻找的确切行为。display: none;会将项目完全从 DOM 树中取出，其他元素也会相应地移动。visibility: hidden;只会使元素不可见，而不更改 DOM 树。

如果你使用一个库，比如 jQuery，那么你最好使用display: none;.，因为你可以使用 jQuery 的内置隐藏/显示函数，这些函数会display相应地改变。如果你不这样做，那么无论如何你都是在编写自己的行为反应，所以你可以使用任何你想要的。

于 2012-10-26T15:36:16.437 回答