可以简单点 2018-11-10 07:19 采纳率: 80%
浏览 5570
已采纳

急,html怎么实现多级菜单

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

  • 写回答

2条回答 默认 最新

  • 天际的海浪 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>```
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题