例子：列表点击即可打开下拉子菜单

最新推荐文章于 2022-10-31 15:04:33 发布

weixin_30471065

最新推荐文章于 2022-10-31 15:04:33 发布

阅读量265

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/claricre/p/6061811.html

版权

<style type="text/css">
    *{margin:0;padding:0;list-style:none;font-size:14px}
    #caidan{width:200px; height:500px; border:1px solid #00F;text-align:center; vertical-align:middle; line-height:50px;}
    .title{background:green;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}
    .title1{background:blue;color:#000;border-bottom:1px solid #666;cursor:pointer;}
    .erji li{ background-color:red;}
</style>
</head>

<body>

<div id="caidan">

    <div class="title" id="menu1" onclick="dianji('1')">列表1</div>
    <div id="list1" class="erji"  style="display:none">
        <ul>
            <li>下拉列表1</li>
            <li>下拉列表2</li>
            <li>下拉列表3</li>
        </ul>
    </div>
    <div class="title" id="menu2" onclick="dianji('2')">列表2</div>
    <div class="erji" id="list2" style="display:none">
        <ul>
            <li>下拉列表4</li>
            <li>下拉列表5</li>
            <li>下拉列表6</li>
        </ul>

    </div>
    <div class="title" id="menu3" onclick="dianji('3')">列表3</div>
    <div class="erji" id="list3" style="display:none">
        <ul>
            <li>下拉列表7</li>
            <li>下拉列表8</li>
            <li>下拉列表9</li>
        </ul>

    </div>


</div>
</body>
<script type="text/javascript">
function dianji(n)
{
    var list = document.getElementById("list"+n);
    var menu = document.getElementById("menu"+n)
    
    if(list.style.display=="none")
    {
        document.getElementById("list"+n).style.display="block";
    }
    else
    {
        document.getElementById("list"+n).style.display="none";
    }
}
</script>

转载于:https://www.cnblogs.com/claricre/p/6061811.html

weixin_30471065

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
例子：列表点击即可打开下拉子菜单

<style type="text/css"> *{margin:0;padding:0;list-style:none;font-size:14px} #caidan{width:200px; height:500px; border:1px solid #00F;text-align:center; vertical-align:middle; line-h...
复制链接

扫一扫