1

如何使用 jQuery 显示一个项目，使用slideToggle,fadeIn或类似的函数，它最初是隐藏的，并且除了使用 css 属性之外 display:block还使用 css 属性？我知道我可以style="display:none"在可见时添加 html 和样式 css，但是有没有只使用 css 的方法？还是另一种有优势的方式？display:inline当它显示元素不直观并且以后可能难以调试时，必须使用这种技术来“欺骗” jQuery 使用它。这是一个使用技巧的示例（我将两个 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;    
}​
4

4 回答 4

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;
}
于 2012-08-14T02:03:11.037 回答
1

如果您试图避免使用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/

于 2012-08-14T02:15:04.947 回答
0

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

CSS：

div{display:inline,none;}​
于 2012-08-14T02:01:20.527 回答
0

感谢其他回答者，但经过更多研究后，我认为我找到了一个稍微干净的答案。只需通过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;        
}
于 2012-08-15T00:29:41.633 回答