求大神。。。html中为什么点击不能使隐藏的li显示??




无标题文档
li{ border: 1px solid #FFF; cursor: pointer; } .outer{ list-style: none; margin: 0; padding: 0; padding: 10px; cursor: pointer; } .inner{ display: none; } function show(){ document.getElementsByClassName("inner").display="inline"; }

  • 艺术类
    • 唱歌
    • 跳舞
    • 吉他


  • 体育类
    • 长跑
    • 短跑
    • 跳高


  • 学习类
    • 语文
    • 数学
    • 英语




设置了隐藏之后点击不能让已经隐藏的二级菜单显示出来。。是为什么啊。。。

贴上完整的代码才能知道是哪里的问题

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
</head>
<style>
    li {
        border: 1px solid #FFF;
        cursor: pointer;
    }

    .outer {
        list-style: none;
        margin: 0;
        padding: 0;
        padding: 10px;
        cursor: pointer;
    }

    .inner {
        display: none;
    }
</style>
<script>
    function show(el) {
        el.getElementsByClassName("inner")[0].style.display = "inline";

    }
</script>
<body>
    <ul class="outer">
        <li id='yishu' onclick="show(this)">
            艺术类
            <ul class="inner">
                <li name="yishu">
                    唱歌
                </li>
                <li name="yishu">
                    跳舞
                </li>
                <li name="yishu">
                    吉他
                </li>
            </ul>
        </li>
    </ul>
    <ul class="outer">
        <li id='tiyu' onclick="show(this)">
            体育类
            <ul class="inner">
                <li name="tiyu">
                    长跑
                </li>
                <li name="tiyu">
                    短跑
                </li>
                <li name="tiyu">
                    跳高
                </li>
            </ul>
        </li>
    </ul>
    <ul class="outer">
        <li id='yishu' onclick="show(this)">
            学习类
            <ul class="inner">
                <li name="xuexi">
                    语文
                </li>
                <li name="xuexi">
                    数学
                </li>
                <li name="xuexi">
                    英语
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

看一看图片说明图片说明图片说明