Question

如何使用jQuery显示项目，使用slideToggle，fadeIn或类似的功能，最初隐藏，并使用css属性除了 display:block？我知道我可以在html中添加style="display:none"并在可见时为css设置样式，但有没有一种方法只使用css？还是另一种有优势的方式？必须使用这种技术来“欺骗”jQuery在显示元素时使用display:inline并不直观，以后可能很难调试。下面是一个使用技巧的示例（即使在显示第二个内容之后，我保持两个div内联）。

的 jsFiddle 的

<div id="a">hello</div>
<div id="b" style="display:none">world</div>
<button>show world</button>

JS：

$("button").click(function(){
    $("#b").fadeIn();
});

的CSS：

div{
   display:inline;    
}

Answer 1

http://jsfiddle.net/sechou/JYsnd/1/ HTML

<div id="a">hello</div>
<div id="b" class="hideme">world</div>
<button>show world</button>

CSS

div{
   display:inline;    
}
.hideme{
   display:none;
}

Answer 2

如果您尝试避免使用display: inline，则可以单独定位2个div，以便使用float: left正确显示。

使用类隐藏div也有助于稍后调试代码。

请参阅此处的示例：

http://jsfiddle.net/bq9Hn/

如果您尝试避免使用display：none和display：block，那么您可以使用z-index隐藏背景中的div，然后通过设置更高的z-index将其显示在前面值。例如

http://jsfiddle.net/8xjEz/2/

Answer 3

我认为这就是你要求的。你不需要HTML。只需用逗号保持内联和隐藏即可。

CSS：

div{display:inline,none;}

Answer 4

感谢其他的回答者，但经过一些研究后，我想我找到了一个稍微清洁的答案。只需通过调用fadeIn修改css(display:whatever)语句即可修改结果。由于fadeIn和其他jQuery效果是异步的，因此不应引起任何图形故障。使用此方法，css仅影响初始样式，html中没有样式属性，并且jQuery语句的意图和效果是显而易见的。感谢jQuery论坛用户godsbest的想法。

的 jsFiddle 的

<div id="a">hello</div> <div id="b">world</div> <button>show world</button>

JS：

$("button").click(function(){ $("#b").fadeIn().css("display","inline"); });

的CSS：

#a{ display:inline; } #b{ display:none; }

显示没有显示的jquery块：“block”

4 个答案: