weixin_38860401
可以简单点
2018-11-10 07:19
采纳率: 87.5%
浏览 4.7k

急,html怎么实现多级菜单

重点:点击父菜单是并不是显示隐藏的子菜单,而是直接跳转到父菜单页面,
只有点击父菜单旁边的三角形符号时才会显示/隐藏子菜单,如果一个菜单没有子菜单,则不显示三角形符号。效果大概类似于下面这张图。
网上的例子都是点击父菜单就直接显示子菜单,但我们的需求并不是这样。
图片说明
图片说明
很急,如果网上有这样的案例,请给出网址,如果可行马上给分。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • jslang
    天际的海浪 2018-11-10 09:09
    已采纳

    很简单。只要把点击事件改到三角上即可

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title> 页面名称 </title>
    <style type="text/css">
    #menu li {
        list-style-type: none;
        margin-left: 20px;
    }
    #menu ul {
        margin: 0;
        padding: 0;
    }
    #menu .mg {
        width: 20px;
        height: 20px;
        font-style: 20px;
        line-height: 20px;
        text-align: center;
        display: inline-block;
        margin-left: -20px;
    }
    #menu .on {
        transform: rotate(90deg);
    }
    #menu>ul ul {
        display: none;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <div id="menu">
        <ul>
            <li><a href="p1.html">菜单 1</a></li>
            <li><span class="mg">></span><a href="p2.html">菜单 2</a>
                <ul>
                    <li><span class="mg">></span><a href="p2-1.html">菜单 2-1</a>
                        <ul>
                            <li><a href="p2-1-1.html">菜单 2-1-1</a></li>
                            <li><a href="p2-1-2.html">菜单 2-1-2</a></li>
                        </ul>
                    </li>
                    <li><a href="p2-2.html">菜单 2-2</a></li>
                    <li><a href="p2-3.html">菜单 2-3</a></li>
                </ul>
            </li>
            <li><span class="mg">></span><a href="p3.html">菜单 3</a>
                <ul>
                    <li><a href="p3-1.html">菜单 3-1</a></li>
                    <li><a href="p3-2.html">菜单 3-2</a></li>
                    <li><a href="p3-3.html">菜单 3-3</a></li>
                </ul>
            </li>
            <li><a href="p4.html">菜单 4</a></li>
        </ul>
    </div>
    <script type="text/javascript">
    $(function(){
        $("#menu").on("click", ".mg", function(event){
            $(this).toggleClass("on").next().next().toggle();
        });
    });
    </script>
    </body>
    </html>```
    
    
    点赞 评论
  • weixin_43652106
    appleคิดถึง 2018-11-10 07:26
    点赞 评论

相关推荐