【问题标题】:HTML Header Dropdown not workingHTML标题下拉菜单不起作用
【发布时间】:2026-01-16 12:40:01
【问题描述】:

我的下拉菜单无法正常工作。就像有时当我在我的 css 或 html 中更改某些内容并刷新页面时,它会工作一次,但以后再也不会工作了。不能为我的生活弄清楚为什么。我指的是带有 nav navbar-nav pull-right 类的 ul。

希望各位大神能帮帮忙。

这是我页面的代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Website Title & Description for Search Engine purposes -->
    <title></title>
    <meta name="Richmond Movie Club" content="">

    <!-- Mobile viewport optimized -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Bootstrap CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
    
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Custom CSS -->
    <link href="includes/css/styles.css" rel="stylesheet">

    <!-- Include Modernizr in the head, before any other Javascript -->
    <script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>

<body>

    <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="container">

            <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- end responsive-dropdown -->

            <a href="index.php" class="navbar-brand">RichmondMC</a>

            <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="movieDatabase.php">Movie Database</a></li>
                    <li><a href="gallery.php">Gallery</a></li>
                    <li><a href="ratings.php">Ratings</a></li>
                </ul>
                <!-- end navbar-nav -->
                <ul class="nav navbar-nav pull-right">
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> My Account <strong class="caret"></strong></a>

                        <ul class="dropdown-menu">
                            <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
                            <li><a href="#registerModal" role="button" data-toggle="modal"><span class="glyphicon glyphicon-list-alt"></span> Register New User</a></li>
                            <li class="divider"></li>
                            <li><a href="login.php"><span class="glyphicon glyphicon-play"></span> Sign In</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-off"></span> Sign Out</a></li>
                        </ul>
                        <!-- end dropdown-menu -->
                    </li>
                    <!-- end dropdown -->
                </ul>
                <!-- end myAccount-dropdown -->
            </div>
            <!-- end nav-collapse -->
            
        </div>
        <!-- end container -->
    </div>
    <!-- end navbar -->


    <div class="modal fade" id="registerModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <a href="#" class="close" data-dismiss="modal">&times;</a>

                            <h4 class="modal-title"><span class="glyphicon glyphicon-th-list"></span> New User Registration </h4>
                        </div>
                        <!-- end modal-header -->
                        <div class="modal-body">
                            <h5>Enter the New Members details including username/password to complete registration</h5><br>

                            <form action="" class="form-horizontal">
                                <div class="form-group">
                                    <label for="username" class="col-lg-4 control-label">Username:</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="username" placeholder="Username" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="password" class="col-lg-4 control-label">Password:</label>
                                    <div class="col-lg-8">
                                        <input type="password" class="form-control" id="password" placeholder="Password" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="firstName" class="col-lg-4 control-label">First Name:</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="firstName" placeholder="First Name" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastName" class="col-lg-4 control-label">Last Name:</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="emailAddress" class="col-lg-4 control-label">Email Address:</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="emailAddress" placeholder="Email Address" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="phoneNumber" class="col-lg-4 control-label">Phone Number:</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="phoneNumber" placeholder="Phone Number" required>
                                    </div>
                                </div>
                                <button class="btn btn-success pull-right" type="submit" id="alertMe">Submit</button><br>
                            </form>
                            <!-- end form -->
                        </div>
                        <!-- end modal-body -->
                        <div class="modal-footer">
                                <div class="alert alert-success alert-block fade in" id="successAlert">
                                <button class="close" type="button" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
                                <h4>Success!</h4>
                                <p>New user registered successfully</p>
                            </div><!-- end alert -->
                        </div>
                    </div>
                    <!-- end modal-content -->
                </div>
                <!-- end modal-dialog -->
            </div>
            <!-- end modal -->



    <!-- All Javascript at the bottom of the page for faster page loading -->

    <!-- First try for the online version of jQuery-->
    <script src="http://code.jquery.com/jquery.js"></script>

    <!-- If no online access, fallback to our hardcoded version of jQuery -->
    <script>
        window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')
    </script>

    <!-- Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!-- Custom JS -->
    <script src="includes/js/script.js"></script>
</body>

</html>

编辑

忘记包含这些是 .php 文件。 这是我的 header.php,我将它包含在我的所有页面中 &lt;?php include "header.php" ?&gt; 如果这有什么不同的话。

【问题讨论】:

    标签: html twitter-bootstrap twitter-bootstrap-3


    【解决方案1】:

    在下面的 sn-p 中运行良好。您的自定义 css 或 js 文件中一定存在一些问题,这些问题妨碍了下拉菜单。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <!-- Website Title & Description for Search Engine purposes -->
        <title></title>
        <meta name="Richmond Movie Club" content="">
    
        <!-- Mobile viewport optimized -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
        <!-- Bootstrap CSS -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
              <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <!-- Font Awesome CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
        <!-- Custom CSS -->
        <link href="includes/css/styles.css" rel="stylesheet">
    
        <!-- Include Modernizr in the head, before any other Javascript -->
        <script src="includes/js/modernizr-2.6.2.min.js"></script>
    </head>
    
    <body>
    
        <div class="navbar navbar-fixed-top navbar-inverse">
            <div class="container">
    
                <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- end responsive-dropdown -->
    
                <a href="index.php" class="navbar-brand">RichmondMC</a>
    
                <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="movieDatabase.php">Movie Database</a></li>
                        <li><a href="gallery.php">Gallery</a></li>
                        <li><a href="ratings.php">Ratings</a></li>
                    </ul>
                    <!-- end navbar-nav -->
                    <ul class="nav navbar-nav pull-right">
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> My Account <strong class="caret"></strong></a>
    
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
                                <li><a href="#registerModal" role="button" data-toggle="modal"><span class="glyphicon glyphicon-list-alt"></span> Register New User</a></li>
                                <li class="divider"></li>
                                <li><a href="login.php"><span class="glyphicon glyphicon-play"></span> Sign In</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-off"></span> Sign Out</a></li>
                            </ul>
                            <!-- end dropdown-menu -->
                        </li>
                        <!-- end dropdown -->
                    </ul>
                    <!-- end myAccount-dropdown -->
                </div>
                <!-- end nav-collapse -->
                
            </div>
            <!-- end container -->
        </div>
        <!-- end navbar -->
    
    
        <div class="modal fade" id="registerModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <a href="#" class="close" data-dismiss="modal">&times;</a>
    
                                <h4 class="modal-title"><span class="glyphicon glyphicon-th-list"></span> New User Registration </h4>
                            </div>
                            <!-- end modal-header -->
                            <div class="modal-body">
                                <h5>Enter the New Members details including username/password to complete registration</h5><br>
    
                                <form action="" class="form-horizontal">
                                    <div class="form-group">
                                        <label for="username" class="col-lg-4 control-label">Username:</label>
                                        <div class="col-lg-8">
                                            <input type="text" class="form-control" id="username" placeholder="Username" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="password" class="col-lg-4 control-label">Password:</label>
                                        <div class="col-lg-8">
                                            <input type="password" class="form-control" id="password" placeholder="Password" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="firstName" class="col-lg-4 control-label">First Name:</label>
                                        <div class="col-lg-8">
                                            <input type="text" class="form-control" id="firstName" placeholder="First Name" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="lastName" class="col-lg-4 control-label">Last Name:</label>
                                        <div class="col-lg-8">
                                            <input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="emailAddress" class="col-lg-4 control-label">Email Address:</label>
                                        <div class="col-lg-8">
                                            <input type="text" class="form-control" id="emailAddress" placeholder="Email Address" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="phoneNumber" class="col-lg-4 control-label">Phone Number:</label>
                                        <div class="col-lg-8">
                                            <input type="text" class="form-control" id="phoneNumber" placeholder="Phone Number" required>
                                        </div>
                                    </div>
                                    <button class="btn btn-success pull-right" type="submit" id="alertMe">Submit</button><br>
                                </form>
                                <!-- end form -->
                            </div>
                            <!-- end modal-body -->
                            <div class="modal-footer">
                                    <div class="alert alert-success alert-block fade in" id="successAlert">
                                    <button class="close" type="button" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
                                    <h4>Success!</h4>
                                    <p>New user registered successfully</p>
                                </div><!-- end alert -->
                            </div>
                        </div>
                        <!-- end modal-content -->
                    </div>
                    <!-- end modal-dialog -->
                </div>
                <!-- end modal -->
    
    
    
        <!-- All Javascript at the bottom of the page for faster page loading -->
    
        <!-- First try for the online version of jQuery-->
        <script src="http://code.jquery.com/jquery.js"></script>
    
        <!-- If no online access, fallback to our hardcoded version of jQuery -->
        <script>
            window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')
        </script>
    
        <!-- Bootstrap JS -->
        <script src="bootstrap/js/bootstrap.min.js"></script>
    
        <!-- Custom JS -->
        <script src="includes/js/script.js"></script>
    </body>
    
    </html>

    【讨论】:

    • 不要在 header.php 中添加引导 css 和 js。而是尝试将其包含在每个页面中。你试过了吗?
    • 没有区别。我发现,如果我使用导航栏中的导航链接在页面之间切换并单击下拉菜单,它将仅适用于第一次单击。但是一旦我点击下拉菜单并尝试再次点击下拉菜单就不会出现
    • 天哪,太明显了哈哈!当然,当我将这些文件包含到主页中时,我不需要包含所有这些文件。删除了所有的 css、js 和 javascript cdn,现在它的工作完美。传奇!