Question

这是我的代码：

<html>
<head>
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.show{
   display : none;
}
</style>
<script>
    window.onload = function(){
       var clickElement = document.getElementById("wow");
        clickElement.onclick = function(){
             $(".show").css('display', 'initial');
        }
    }
</script>
</head>
<body>
 <ul>
    <li id="wow">select</li>
    <li class="show">select1</li>
    <li class="show">select2</li>
    <li class="show">select3</li>

 </ul>
</body>
</html>

当我点击时，在选择中，选择列表没有正确显示，而是显示为内联，为什么？

Answer 1

您必须将display类型更改为list-item而不是initial值;因为initial属性的display值为inline。这在the spec中有记录。

initial关键字引用值defined by CSS，而不是浏览器默认值。

或者，您可以使用jQuery .show()方法来实现这一目标。

进一步阅读：

Reset CSS display property to default value

Answer 2

使用jQuery show()：

$(".show").show();

Answer 3

您应该使用list-item代替initial。

替换此行：

$(".show").css('display', 'initial');

使用：

$(".show").css('display', 'list-item');

来源：http://www.w3.org/wiki/CSS/Properties/display

为什么list元素不能正确显示使用display initial

3 个答案: