在 Grails 项目中，我想将 NAVBAR(BootStrap) 与多级下拉菜单一起使用，并通过谷歌搜索让我知道我应该使用 smartmenus 使其工作。
我发现很难找到任何可以给我线索的示例，我认为它们中的大多数已经过时并且不适用于最新版本的 grails 和 bootstrap。
我已经下载(克隆了一个 git-repository)smartmenues 并找到了很多脚本和样式表。但一切都让我感到困惑。
如果我能得到一些帮助，让我朝着正确的方向前进，我会非常高兴。
//LG
好的，我创建了一个新的 grails-project(testMultiLevel) 并将 index.gsp 修改为:
<!doctype html>
<html>
<head>
<meta name="layout" content="main"/>
<title>Welcome to Grails</title>
<asset:link rel="icon" href="favicon.ico" type="image/x-ico" />
</head>
<body>
<content tag="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Grails Info <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Application Status <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Environment: ${grails.util.Environment.current.name}</a></li>
<li><a href="#">App profile: ${grailsApplication.config.grails?.profile}</a></li>
<li><a href="#">App version:
<g:meta name="info.app.version"/></a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Grails version:
<g:meta name="info.app.grailsVersion"/></a>
</li>
<li><a href="#">Groovy version: ${GroovySystem.getVersion()}</a></li>
<li><a href="#">JVM version: ${System.getProperty('java.version')}</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Reloading active: ${grails.util.Environment.reloadingAgentEnabled}</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Artefacts <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Controllers: ${grailsApplication.controllerClasses.size()}</a></li>
<li><a href="#">Domains: ${grailsApplication.domainClasses.size()}</a></li>
<li><a href="#">Services: ${grailsApplication.serviceClasses.size()}</a></li>
<li><a href="#">Tag Libraries: ${grailsApplication.tagLibClasses.size()}</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Installed Plugins <span class="caret"></span></a>
<ul class="dropdown-menu">
<g:each var="plugin" in="${applicationContext.getBean('pluginManager').allPlugins}">
<li><a href="#">${plugin.name} - ${plugin.version}</a></li>
</g:each>
</ul>
</li>
</ul>
</li>
</content>
<div class="svg" role="presentation">
<div class="grails-logo-container">
<asset:image src="grails-cupsonly-logo-white.svg" class="grails-logo"/>
</div>
</div>
<div id="content" role="main">
<section class="row colset-2-its">
<h1>Welcome to Grails</h1>
<p>
Congratulations, you have successfully started your first Grails application! At the moment
this is the default page, feel free to modify it to either redirect to a controller or display
whatever content you may choose. Below is a list of controllers that are currently deployed in
this application, click on each to execute its default action:
</p>
<div id="controllers" role="navigation">
<h2>Available Controllers:</h2>
<ul>
<g:each var="c" in="${grailsApplication.controllerClasses.sort { it.fullName } }">
<li class="controller">
<g:link controller="${c.logicalPropertyName}">${c.fullName}</g:link>
</li>
</g:each>
</ul>
</div>
</section>
</div>
<script>
$(document).ready(function(){
$('.dropdown a.dropdown-toggle').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
这应该会修改顶部菜单以仅显示一项，然后当您单击它时，它将向您显示 2:nd 级别。到目前为止一切都很好，但是如果您单击 2:nd 级别，您希望它扩展但它不会。
我找到了一个有效的例子，但它不在 grails 中。他们使用了我在 GSP 末尾添加的简单脚本。但它仍然行不通。
Bootstrap 在早期版本中有多级菜单，但他们把它拿走了，现在推荐使用 smartmenus。
问题是我找不到任何可以告诉我如何将智能菜单集成到应用程序中以使其工作的东西。
我现在需要哪些文件以及将这些文件放在哪里才能使其工作。
组合如此之多，因此不可能使用 TRY-and-Error 方法。
但也许还有其他比使用 smartmenus 更简单的解决方案，这对我来说没问题。
//LG
我在这里也使用了一个布局，这就是包含 Bootstrap 的地方。但这不是结束，因为它包含了 application.js，它反过来又需要 Bootstrap 。
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
<g:layoutTitle default="Grails"/>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<asset:stylesheet src="application.css"/>
<g:layoutHead/>
</head>
<body>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#">
<i class="fa grails-icon">
<asset:image src="grails-cupsonly-logo-white.svg"/>
</i> Grails
</a>
</div>
<div class="navbar-collapse collapse" aria-expanded="false" style="height: 0.8px;">
<ul class="nav navbar-nav navbar-right">
<g:pageProperty name="page.nav" />
</ul>
</div>
</div>
</div>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading…"/>
</div>
<asset:javascript src="application.js"/>
</body>
</html>
最佳答案
我假设您使用的是 Grails 3？
从下载的 zip 中，您可能只需要核心 *.js 和 *.css 文件，因此将 jquery.smartmenus.min.js 放在\grails-app\assets\javascripts 和 sm-core-css.css 放在\grails-app\assets\stylesheets 然后将以下内容添加到\grails-app\assets\stylesheets\application.css
//= require sm-core-css
以下是\grails-app\assets\javascripts\application.js
//= require jquery.smartmenus.min
如果您需要任何其他模块，您只需将它们添加到相关目录并在应用程序中引用。*
关于twitter-bootstrap - 我需要做什么才能在 GRAILS 项目的 Bootstrap 上使用 smartmenus？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41419480/