Why the item in the list is not displayed correctly using the initial display

advertisements

This is my code:

<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>

when I clicked, on the select, the selection list not show up properly but instead they show up inline, why??


You have to change the display type to list-item rather than the initial value; Because the initial value of display property is inline. This is documented in the spec.

The initial keyword refers to the value defined by CSS, not the browser default.

Alternatively, you could use jQuery .show() method to achieve that.

For further reading:

  • Reset CSS display property to default value