Question

我的应用程序在开发中完美运行但是当我在tomcat上部署它时，下拉菜单停止工作。它就在那里，它在鼠标悬停时掉落，但它没有对鼠标点击做出反应。我检查了生成的链接，看起来很好。如果我手动输入URL，它可以正常工作。我猜它是一些JavaScript /文件位置问题，但我似乎无法找到它。可能遗漏了一些明显的东西。

这是我生成菜单的main.gsp：

<!doctype html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><g:layoutTitle default="Grails"/></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
    <link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
    <link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
    <link rel="stylesheet" href="${resource(dir: 'css/bootstrap', file: 'bootstrap.css')}" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript" src="<g:resource dir="/js/bootstrap" file="bootstrap-dropdown.js" />"></script>

    <g:layoutHead/>
    <r:layoutResources />
</head>
<body>
    <div class="navbar-inner">
        <a href="http://grails.org">
            <img src="${resource(dir: 'images', file: 'coming.gif')}" alt="Grails"/>
        </a>
        <sec:ifLoggedIn>
            <div id="headinfo">
                <g:message code="header.user" /> :  ${ sec.loggedInUserInfo(field:'username') }  <br/>
                <g:message code="header.date" /> : <g:formatDate date='${new Date()}' format='E, dd MMM yyyy' locale='${Locale.ENGLISH}'/> <br/>
                <a href="?lang=sr"> <g:img dir="images" file="sr.gif"/>  </a>
                <a href="?lang=en"> <g:img dir="images" file="en.gif"/>  </a>
            </div>
        </sec:ifLoggedIn>
        <h2 id="maintitle"><g:layoutTitle default="Grails"/></h2>
    </div>

    <header class="jumbotron subhead" id="overview">
        <div class="subnav">
            <ul class="nav nav-pills" id="meni">
                <li class="dropdown open">
                    <a href="${createLink(controller:'ticket',action:'index')}"> <g:message code="menu.home" /> </a>
                </li>
                <li class="dropdown open">
                    <g:link controller="ticket" action="list" data-toggle="dropdown"> <g:message code="menu.tickets" /> <b class="caret"></b> </g:link>
                    <ul class="dropdown-menu">
                        <li> <g:link controller="ticket" action="list" data-toggle="dropdown"> <g:message code="menu.ticketList" /> </g:link> </li>
                        <li> <g:link controller="ticket" action="create" data-toggle="dropdown"> <g:message code="menu.createTicket" /> </g:link> </li>
                    </ul>
                </li>


                <li class="dropdown open">
                    <a href="#" data-toggle="dropdown"> <g:message code="menu.admin" /> <b class="caret"></b> </a>
                    <ul class="dropdown-menu">
                        <li> <g:link controller="user" action="list" data-toggle="dropdown"> <g:message code="menu.listUsers" /> </g:link> </li>
                        <li> <g:link controller="company" action="list" data-toggle="dropdown"> <g:message code="menu.listCompanies" /> </g:link> </li>
                        <li> <g:link controller="company" action="create" data-toggle="dropdown"> <g:message code="menu.createCompany" /> </g:link> </li>
                        <li> <g:link controller="project" action="list" data-toggle="dropdown"> <g:message code="menu.projectsList" /> </g:link> </li>
                        <li> <g:link controller="project" action="create" data-toggle="dropdown"> <g:message code="menu.createProjects" /> </g:link> </li>
                        <li> <g:link controller="user" action="invitation" data-toggle="dropdown"> <g:message code="menu.inviteUser" /> </g:link> </li>
                    </ul>
                </li>
                <sec:ifNotLoggedIn>
                    <li class="dropdown open">
                        <g:link controller="login" action="index" data-toggle="dropdown"> <g:message code="menu.login" /> </g:link>
                    </li>
                </sec:ifNotLoggedIn>
                <sec:ifLoggedIn>
                    <li class="dropdown open">
                        <g:link controller="logout" action="index" data-toggle="dropdown"> <g:message code="menu.logout" /> </g:link>
                    </li>
                </sec:ifLoggedIn>
            </ul>
        </div>
    </header>


    <div id="maincontent">
        <g:layoutBody/>
    </div>

    <div class="navbar-inner" id="footerdiv">
        <div id="foottext"> Help Desk </div>
    </div>

    <div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading&hellip;"/></div>
    <g:javascript library="application"/>
    <r:layoutResources />

    </div>
</body>

这是一个页面头：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><g:layoutTitle default="Grails"/></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
    <link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
    <link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
    <link rel="stylesheet" href="${resource(dir: 'css/bootstrap', file: 'bootstrap.css')}" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript" src="<g:resource dir="/js/bootstrap" file="bootstrap-dropdown.js" />"></script>

    <g:layoutHead/>
    <r:layoutResources />
</head>

提前致谢。

编辑：这是Chrome控制台中唯一的错误：

Failed to load resource: the server responded with a status of 403 (Forbidden) http://sg.perion.com/v1.1/js/gt.js

我注意到如果我用right_mouse_button / open_in_new_tab打开一个下拉菜单链接就可以了。

Answer 1

您需要拥有有效的Doctype。确保您的.gsp和生成的页面源始于：

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

Answer 2

更改

<script type="text/javascript" src="<g:resource dir="/js/bootstrap" file="bootstrap-dropdown.js" />"></script>

要

<script type="text/javascript" src="<g:resource dir="js/bootstrap" file="bootstrap-dropdown.js" />"></script>

Answer 3

您可能想要使用Grails Bootstrap plugin。这应该处理包含所有必要的引导程序文件。

Answer 4

我是MVC和Bootstrap的新手，在Bootstrap 3.3.5下遇到此问题我修改了bootstrap.css来恢复子菜单类，但是没有修改bootstrap.min.css。一切都很好，在编译Debug = True（web.config - ＆gt; system.web）和minified文件被忽略，但当部署到Debug = False的服务器时，缩小版本（bootstrap.min.css）被覆盖我的定制版本。作为短期修复，我删除了生产中的bootstrap.min.css文件，但现在将调查更新缩小的.css文件。绝对是一个新手的错误，但我们中有一些人在那里，我希望这有助于其他人。

Twitter引导下拉菜单在部署时不起作用

4 个答案: