Question

我正在创建多个网页。我有一个导航栏，里面有一个下拉列表。我将此导航栏复制粘贴到每个JSP网页上，但下拉菜单不适用于其中两个网页。

这些网页有一个共同点 - 它们都有一个datepicker组件，而我的其他页面都没有。所以我怀疑datepicker和下拉菜单之间存在冲突。

编辑：我注释掉了日期选择器部分，事实证明它实际上不是因为日期选择器。

我不熟悉JavaScript，所以有人可以为我挑选问题吗？

registration.jsp（下拉菜单不适用于此页面）

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User Registration Form</title>
<link href="<c:url value='/static/css/bootstrap.css' />" rel="stylesheet">
</link>
<link href="<c:url value='/static/css/app.css' />" rel="stylesheet"></link>
</head>

<body>      
    <nav class="navbar" style="padding:5px 8%;">
        <ul class="nav navbar-nav">
            <li><a href="<c:url value='/home'/>">Home</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href=" <c:url value='/list'/>">Users</a></li>
            <li><a href=" <c:url value='/services'/>">Services</a></li>
            <li><a href=" <c:url value='/clients'/>">Clients</a></li>
            <li><a href=" <c:url value='/contact'/>">Contact</a></li>
            <li><a href=" <c:url value='/news'/>">News</a></li>             

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Session Details <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a>SSO ID: ${loggedinuser}</a></li>
                    <li><a href=" <c:url value='/list'/>">My Profile</a></li>
                    <li><a href="#">Change Login Info</a></li>
                    <li><a href="<c:url value='logout'/>">Log Out</a></li>
                </ul>
            </li>

        </ul>
</nav>
<div style="margin-top: 60px;"></div>


                             [Some input fields ...]


        <div class="container">
        <h4>Hire Date:</h4>
        <div class="input-group">
            <div class="input-group-addon">
                <i class="fa fa-calendar"> </i>
            </div>
            <form:input type="text" path="hireDate" id="hireDate"
                class="form-control" placeholder="Hire Date" />
        </div>

        <div class="has-error">
            <form:errors path="hireDate" class="help-inline" />
        </div>
    </div>


                        [some more input fields ...]


    <div class="form-actions floatRight">
        <c:choose>
            <c:when test="${edit}">
                <input type="submit" value="Update" class="btn btn-primary" /> or <a
                    href="<c:url value='/list' />">Cancel</a>
            </c:when>
            <c:otherwise>
                <input type="submit" value="Register" class="btn btn-primary" /> or <a
                    href="<c:url value='/list' />">Cancel</a>
            </c:otherwise>
        </c:choose>
    </div>
</form:form>

<!-- Extra JavaScript/CSS added manually in "Settings" tab -->
<!-- Include jQuery -->
<script type="text/javascript"
    src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>


<!-- Include Date Range Picker -->
<script>
    $(document).ready(
            function() {
                var date_input = $('input[name="date"]'); //our date input has the name "date"
                var container = $('.bootstrap-iso form').length > 0 ? $(
                        '.bootstrap-iso form').parent() : "body";
                date_input.datepicker({
                    format : 'mm/dd/yyyy',
                    container : container,
                    todayHighlight : true,
                    autoclose : true,
                })
            })
</script>

clients.jsp（下拉菜单适用于此页面）

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Our Clients</title>

<link href="<c:url value='/static/css/bootstrap.css' />" rel="stylesheet"></link>
<link href="<c:url value='/static/css/app.css' />" rel="stylesheet"></link>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <nav class="navbar" style="padding:5px 8%;">
        <ul class="nav navbar-nav">
            <li><a href="<c:url value='/home'/>">Home</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href=" <c:url value='/list'/>">Users</a></li>
            <li><a href=" <c:url value='/services'/>">Services</a></li>
            <li><a href=" <c:url value='/clients'/>">Clients</a></li>
            <li><a href=" <c:url value='/contact'/>">Contact</a></li>
            <li><a href=" <c:url value='/news'/>">News</a></li>             

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Session Details <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a>SSO ID: ${loggedinuser}</a></li>
                    <li><a href=" <c:url value='/list'/>">My Profile</a></li>
                    <li><a href="#">Change Login Info</a></li>
                    <li><a href="<c:url value='logout'/>">Log Out</a></li>
                </ul>
            </li>

        </ul>
</nav>
<div style="margin-top: 60px;"></div>


    <div style="margin: 5px 100px;">

        <div class="container text-center" style="padding: 0px 20%">
            <h2 style="font-size: 70px; color: #6ea6ca">CLIENTS</h2>
            <div
                style="height: 5px; width: 30%; background-color: #6ea6ca; margin: 0 auto;">
            </div>
            <br>

            <p>We have provided solutions for all types of companies-private
                and public.</p>
            <br>
            <p>Here are a few of our clients:</p>
        </div>

                      [Various text and images...]

    </div>
</body>
</html>

Answer 1

您没有将bootstrap js的脚本标记添加到第一个。

<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>

Answer 2

我的代码无法正常工作：

我没有包含Bootstrap和jQuery JavaScript，所以我添加了

我将代码的<head>部分从工作的JSP复制到了非工作的JSP，并且它有效。我将＃1之后的代码与我粘贴的代码进行了比较。出于某种原因，jQuery必须包含在上面 Bootstrap：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Users List</title>
    <link href="<c:url value='/static/css/bootstrap.css' />" rel="stylesheet"></link>
    <link href="<c:url value='/static/css/app.css' />" rel="stylesheet"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

现在可以使用下拉菜单了！

下拉菜单无法在某些页面上运行

2 个答案: