下拉菜单在某些页面上不起作用

Posted 2023-05-08

技术标签:

【中文标题】下拉菜单在某些页面上不起作用【英文标题】：Dropdown menu not working on certain pages 【发布时间】：2018-06-14 18:11:48 【问题描述】：

我正在创建多个网页。我有一个导航栏，里面有一个下拉列表。我将此导航栏复制粘贴到每个 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>

【问题讨论】：

要做的第一件事：注释日期选择器代码以查看是否会干扰 @Ouatataz 我做到了，但仍然没有用。我猜这不是日期选择器。 【参考方案1】：

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

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

【讨论】：

感谢您注意到这一点，但这并没有解决问题。太好了，很高兴能帮到你。【参考方案2】：

我的代码无法正常工作有几个原因：

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

<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>

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

【讨论】：

以上是关于下拉菜单在某些页面上不起作用的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 下拉菜单在 wordpress 上不起作用

Bootstrap 下拉菜单在 Android 上不起作用

下拉菜单在移动设备上不起作用

简单的移动 jQuery 下拉菜单在移动设备上不起作用

水平子菜单在 iPhone 上不起作用（适用于 Chrome 和 Safari）

使用引导程序时，下拉菜单在移动屏幕上不起作用