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

二级菜单的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");
    });
})

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
假设你有一个数据库表,里面包含了一些一级菜单和二级菜单的信息,可以采用以下的步骤来循环生成二级菜单: 1. 首先连接数据库,查询需要的数据。 2. 遍历查询结果,将一级菜单和二级菜单分别保存到不同的数组。 3. 利用循环语句,依次输出一级菜单的名字,并在其下方生成对应的二级菜单。 4. 在生成二级菜单时,需要判断该二级菜单是否属于当前的一级菜单,如果是则输出。 下面是一个简单的示例代码: ``` <% // 连接数据库,查询数据 Connection conn = null; Statement stmt = null; ResultSet rs = null; try { Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/test"; String username = "root"; String password = "123456"; conn = DriverManager.getConnection(url, username, password); stmt = conn.createStatement(); String sql = "SELECT * FROM menu"; rs = stmt.executeQuery(sql); // 将一级菜单和二级菜单分别保存到数组 ArrayList<String> parentMenus = new ArrayList<String>(); ArrayList<String[]> subMenus = new ArrayList<String[]>(); while (rs.next()) { String parentMenu = rs.getString("parent_menu"); String subMenu = rs.getString("sub_menu"); parentMenus.add(parentMenu); subMenus.add(subMenu.split(",")); } // 循环输出一级菜单对应的二级菜单 for (int i = 0; i < parentMenus.size(); i++) { String parentMenu = parentMenus.get(i); out.println("<li>" + parentMenu + "</li>"); String[] subMenuArr = subMenus.get(i); out.println("<ul>"); for (String subMenu : subMenuArr) { if (subMenu.startsWith(parentMenu + "-")) { out.println("<li>" + subMenu.split("-")[1] + "</li>"); } } out.println("</ul>"); } } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } finally { // 关闭数据库连接 if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (stmt != null) { try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } %> ``` 上面的代码,我们首先连接数据库,查询所有的菜单信息,并将一级菜单和二级菜单分别保存到 `parentMenus` 和 `subMenus` 数组。然后我们使用循环语句依次输出每个一级菜单,并在其下方生成对应的二级菜单。在生成二级菜单时,我们使用了一个判断,判断该二级菜单是否属于当前的一级菜单,如果是则输出。最后,我们关闭了数据库连接。 需要注意的是,上面的代码仅仅是一个示例,实际情况下需要根据具体的需求进行修改。例如,如果菜单比较多,可以考虑采用分页的方式进行显示;如果需要对菜单进行操作(例如添加、修改、删除等),则需要编写相应的代码来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值