二级菜单中根据当前的url将对应的菜单设置为当前菜单

最新推荐文章于 2022-01-03 15:33:46 发布

duansamve

最新推荐文章于 2022-01-03 15:33:46 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript jquery 文章标签：菜单

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/89683978

JavaScript 同时被 2 个专栏收录

74 篇文章

订阅专栏

jquery

37 篇文章

订阅专栏

本文详细介绍了一个二级菜单的HTML代码结构，并通过JavaScript实现了菜单项的激活状态切换、二级菜单的展开与收起功能，为网页开发提供了实用的菜单交互解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二级菜单的HTML代码如下：

<!-- // left menu begin -->
<div class="main-left">
       <div class="main-left-menu">
             <h1><a href="/bmpf/home/" target="_self" class="main-left-menu-link"><span class="icon wb-desktop" aria-hidden="true"></span> 系统状态</a></h1>
          <h1><a href="/bmpf/usermng/" target="_self" class="main-left-menu-link"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 用户管理</a></h1>
          <h1><a href="#"><span class="glyphicon glyphicon-yen" aria-hidden="true"></span> 资产管理 <span class="glyphicon glyphicon-menu-right main-left-menu-right" aria-hidden="true"></span></a></h1>
          <ul class="main-left-menu-ul" style="display: none">
              <li><a href="./host.html" target="_self" class="main-left-menu-link">主机管理</a></li>
              <li><a href="./mobile-disk.html" target="_self" class="main-left-menu-link">移动介质管理</a></li>
          </ul>
          <h1><a href="#"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> 软件管理 <span class="glyphicon glyphicon-menu-right main-left-menu-right" aria-hidden="true"></span></a></h1>
          <ul class="main-left-menu-ul" style="display: none">
            <li><a href="/bmpf/softmng/software_name/" target="_self" class="main-left-menu-link">软件添加</a></li>
              <li><a href="/bmpf/softmng/" target="_self" class="main-left-menu-link">软件包管理</a></li>
              <li><a href="/bmpf/softmng/software_policy/" target="_self" class="main-left-menu-link">软件分发策略</a></li>
          </ul>
          <h1><a href="./cascade.html" target="_self" class="main-left-menu-link"><span class="glyphicon glyphicon-link" aria-hidden="true"></span> 级联管理</a></h1>
          <h1><a href="#"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 策略管理 <span class="glyphicon glyphicon-menu-right main-left-menu-right" aria-hidden="true"></span></a></h1>
          <ul class="main-left-menu-ul" style="display: none">
              <li><a href="./user-strategy.html" target="_self" class="main-left-menu-link">用户认证策略</a></li>
              <li><a href="./send-message-strategy.html" target="_self" class="main-left-menu-link">发送消息策略</a></li>
              <li><a href="./mobile-disk-strategy.html" target="_self" class="main-left-menu-link">移动介质策略</a></li>
          </ul>
          <h1><a href="/bmpf/audit/" target="_self" class="main-left-menu-link"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 日志管理</a></h1>
          <h1><a href="#"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> 系统管理 <span class="glyphicon glyphicon-menu-right main-left-menu-right" aria-hidden="true"></span></a></h1>
          <ul class="main-left-menu-ul" style="display: none">
              <li><a href="./sub-system.html" target="_self" class="main-left-menu-link">子系统配置</a></li>
              <li><a href="./secret-degree.html" target="_self" class="main-left-menu-link">密级配置</a></li>
<!--               <li><a href="./warning.html" target="pan-iframe" class="main-left-menu-link">告警设置</a></li> -->
              <li><a href="./system-config.html" target="_self" class="main-left-menu-link">系统设置</a></li>
          </ul>
     </div>
</div>
<!-- left menu end // -->

那如何用JavaScript控制呢？

$(function(){
    /**
     * 左侧菜单
     */
     (function(){
         var url = window.location.href;
         var element = $('.main-left-menu a').filter(function() {
             if(url.indexOf("#") == (url.length - 1)){
                 var thisHref = url.substring(0, url.length - 1);
             }else{
                 var thisHref = url;
             }
             // return this.href == url || url.href.indexOf(this.href) == 0;
             return this.href == thisHref;
         }).parent().addClass('main-left-menu-active');

         if(element.is('li')) {
             element.parent().prev().find(".main-left-menu-right").removeClass("glyphicon-menu-right").addClass("glyphicon-menu-down");
             element.parent().slideDown(100);
         }
     })();
 
    $(".main-left-menu>h1").click(function(){
        $(".main-left-menu-ul").slideUp(100);
        $(".main-left-menu-right").removeClass("glyphicon-menu-down");
        $(".main-left-menu-right").addClass("glyphicon-menu-right");
        if($(this).next("ul").css("display") == "block"){
            $(this).find(".main-left-menu-right").removeClass("glyphicon-menu-down");
            $(this).find(".main-left-menu-right").addClass("glyphicon-menu-right");
            $(this).next("ul").slideUp(100);
        }else if($(this).next("ul").css("display") == "none"){
            $(this).find(".main-left-menu-right").removeClass("glyphicon-menu-right");
            $(this).find(".main-left-menu-right").addClass("glyphicon-menu-down");
            $(this).next("ul").slideDown(200);
        }
    });
    
    $(".main-left-menu-link").click(function(){
        $(".main-left-menu-link").removeClass("main-left-menu-active");
        $(this).addClass("main-left-menu-active");
    });
})