如何使用Tiles、Bootstrap和jsp将菜单和子菜单组合成一个汉堡

How to combine a menu and submenu into one Hamburger with Tiles, Bootstrap and jsp

本文关键字：菜单 一个 Tiles 何使用 Bootstrap jsp 组合      更新时间：2023-09-26

我正在进行一个项目，该项目使用Tiles、Struts2和Bootstrap以及我们的jsp页面。我们有一个基础瓦片文件tiles.xml，其中包含以下代码。

<definition name="baseLayout" template="/WEB-INF/pages/layout.jsp">
    <put-attribute name="title"         value="Regulatory Action Tracking" />
    <put-attribute name="header"        value="/WEB-INF/pages/header.jsp" />
    <put-attribute name="navigation"    value="/WEB-INF/pages/navigation/mainNav.jsp" />
    <put-attribute name='subnav'        value='/WEB-INF/pages/navigation/navEmpty.jsp' />
    <put-attribute name="content"       value="" />
    <put-attribute name="footer"        value="/WEB-INF/pages/footer.jsp" />
</definition>

此代码用于使用mainNav.jsp中包含的以下代码将主菜单放置在每页上。

<div id="navigate">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-main">
    <span class="sr-only">Mobile Menu Button</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>


<nav id="menu" role="navigation">
<div class="container">
    <div class="row">
        <div class="navbar-collapse collapse navbar-responsive-collapse" id="navbar-main" style="height: 1px;">
            <ul class="nav navbar-nav yamm">
                <li><a href="/rat/home.action">Home</a></li>    
                <li><a href="/rat/rule/ruleSummary.action">Rules</a></li>
                <li><a href="/rat/fiveYearReview/fiveYearSummary.action">5 Year Review</a></li>           
                <li><a href="/rat/logout.action" onclick="window.close();">Logout</a></li>                  
            </ul>
        </div>
    </div>
</div>

我的页面通过使用下面显示的tiles-admin.xml和adminNav.jsp文件设置sub-v属性来添加一个子菜单。

    <definition name="employee" extends="baseLayout">
    <put-attribute name="title" value="Regulatory Action Tracking, Employee page" />
    <put-attribute name='subnav' value='/WEB-INF/pages/navigation/adminNav.jsp' />      
    <put-attribute name="content" value="/WEB-INF/pages/admin/employeeMaint.jsp" />
</definition>
<nav id="menu" role="navigation">
<section id="subnav" >      
    <div class="rowNav">
        <div class="navbar-collapse collapse navbar-responsive-collapse" id="navbar-main" style="height: 1px;">
            <ul class="nav navbar-nav yamm">
              <li><a href="/rat/admin/refQuestion.action">Review Admin</a></li>             
              <li><a href="/rat/admin/employee.action">Employee Admin</a></li>
            </ul>
        </div>
    </div>      
</section>

菜单和子菜单与桌面大小的屏幕配合良好，但当它显示在移动大小的屏幕上时，Bootstrap只将主菜单放在"汉堡包"菜单中。有没有办法将子菜单项相应地包含在汉堡中？我用jQuery和javascript标记了它，因为我想我可能必须使用其中一个来修复它。任何帮助都将不胜感激。谢谢

我找到了一种使用jQuery的方法。我不知道这是否是最好的方式。我把下面的代码放在页面的顶部。

    <script src="/rat/javascript/jquery-1.10.2.min.js"></script>    
<script type="text/javascript">
    $(document).ready(function () {
        if ($(window).width() < 768) {
            $(".main-menu").append($(".move"));
        } else {
            $(".sub-menu").append($(".move"));
        }
    });
    $(window).resize(function () {
        if ($(window).width() < 768) {
            $(".main-menu").append($(".move"));
        } else {
            $(".sub-menu").append($(".move"));
        }
    });
</script>

然后，我在主菜单中添加了一个main-menu类。

<ul class="nav navbar-nav yamm main-menu">

最后，我在子菜单中添加了一个sub-menu类，在子菜单列表中的每个元素中添加了move类。

                <ul class="nav navbar-nav yamm sub-menu">
                <DNRTags:AccessRoles roleList="System Administrator">
                    <li class="move"><a href="/rat/admin/refQuestion.action">Review Admin</a></li>                                                                  
                    <li class="move"><a href="/rat/admin/employee.action">Employee Admin</a></li>
                </DNRTags:AccessRoles>                  
            </ul>
相关文章：