问题描述：
点击按钮，会显示或隐藏元素：
使用if 、 document.getElementById()
运行后，点击按钮，却发现并没有显示或隐藏元素
原因分析：
这是一开始的代码
<style>
*{
margin: 0;
padding: 0;
}
#div1 li {
width: 100px;
height: 40px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="更多" onclick="showHide()">
<div id="div1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
function showHide() {
var oDiv = document.getElementById('div1');
if(oDiv.style.display === 'none'){
oDiv.style.display = 'block';
} else {
oDiv.style.display = 'none';
}
}
</script>原因是因为 CSS样式中设置div 的li，所以oDiv.style.display并没有找到div的display值，所以点击没变化
解决方案：
应单独设置div的display，再单独设置div的li样式
#div1 {
display: none;
}
#div1 li {
width: 100px;
height: 40px;
background-color: pink;
}这时oDiv.style.display就能找到div的display值，然后进行判断