javascript - 下拉菜单不会下拉-6ren

javascript - 下拉菜单不会下拉

转载作者：行者123 更新时间：2023-11-30 11:08:54

我无法理解为什么我的下拉菜单不起作用。它们是直接从 Bootstrap 复制的，应该可以工作。我怀疑它与 jQuery/Bootstrap 链接标记有关，但我不太确定。

以不同方式排列 jQuery 和 Bootstrap 链接并输入不同代码。当我在浏览器中打开时它不会工作。

<!DOCTYPE html>
    <html>
    <head>
    	<title>Review of things</title>
    
    	<meta charset="utf-8">
    
    	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    
    	<link rel="stylesheet" type="text/css" href="review.css">
    
    
    </head>
    
    
    <body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    
    <hr width="75%">
    
    <div class="container">
      <div class="row">
        <div class="col">
    	<ul>
    		<li>OnE</li>
    		<li>tWo</li>
    		<li>THrEe</li>
    	</ul>
    	</div>
    
    <div class="col">
    	<table border="2px" solid black>
    	 <thead>
    		<tr>
    				<th>Table</th>
    				<th>ROWS</th>
    				<th>ARE</th>
    				<th>COOOOL</th>
    		</tr>
    	 </thead>
    	 	<tbody>
    			<tr>
    				<td>BOO</td>
    				<td>words</td>
    				<td>for</td>
    				<td>TABLE</td>
    			</tr>
    
    			<tr>
    				<td>Yay words</td>
    				<td>Yay words</td>
    				<td>Yay words</td>
    				<td>Yay words</td>
    			</tr>
    			<tr>
    				<td>table data</td>
    				<td>table data</td>
    				<td>table data</td>
    				<td>table data</td>
    			</tr>
    
    		</tbody>
    	</table>
    
    </div>
    
    <div class="col">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    
    </div>
    </div>
    </div>
    </div>
    
    <div class="formcontain">
    <form>
      <div class="form-group" >
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    </div>
    
    <p>
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.>
    
    </p>
    
    <hr>
    
    <h1>
    	This is an H1 line.
    </h1>
    
    </body>
    </html>

我希望下拉选项在页面完全展开时以及页面在移动设备 View 中显示为 xs 时出现。

最佳答案

您缺少 Bootstrap JavaScript，将此 CDN 添加到 jQuery 下方的代码中:

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>

您的代码(您有一个额外的关闭 div，我将脚本移到了您的 HTML 的底部):

<!DOCTYPE html>
    <html>
    <head>
    	<title>Review of things</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    	<link rel="stylesheet" type="text/css" href="review.css">
    </head>
    
    <body>
    	<nav class="navbar navbar-expand-lg navbar-light bg-light">
    		<a class="navbar-brand" href="#">Navbar</a>
    		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    			<span class="navbar-toggler-icon"></span>
    		</button>
    		<div class="collapse navbar-collapse" id="navbarNavDropdown">
    			<ul class="navbar-nav">
    				<li class="nav-item active">
    					<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    				</li>
    				<li class="nav-item">
    					<a class="nav-link" href="#">Features</a>
    				</li>
    				<li class="nav-item">
    					<a class="nav-link" href="#">Pricing</a>
    				</li>
    				<li class="nav-item dropdown">
    					<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    						Dropdown link
    					</a>
    					<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    						<a class="dropdown-item" href="#">Action</a>
    						<a class="dropdown-item" href="#">Another action</a>
    						<a class="dropdown-item" href="#">Something else here</a>
    					</div>
    				</li>
    			</ul>
    		</div>
    	</nav>
    
    	<hr width="75%">
    
    	<div class="container">
    		<div class="row">
    			<div class="col">
    				<ul>
    					<li>OnE</li>
    					<li>tWo</li>
    					<li>THrEe</li>
    				</ul>
    			</div>
    
    			<div class="col">
    				<table border="2px" solid black>
    					<thead>
    						<tr>
    							<th>Table</th>
    							<th>ROWS</th>
    							<th>ARE</th>
    							<th>COOOOL</th>
    						</tr>
    					</thead>
    					<tbody>
    						<tr>
    							<td>BOO</td>
    							<td>words</td>
    							<td>for</td>
    							<td>TABLE</td>
    						</tr>
    
    						<tr>
    							<td>Yay words</td>
    							<td>Yay words</td>
    							<td>Yay words</td>
    							<td>Yay words</td>
    						</tr>
    						<tr>
    							<td>table data</td>
    							<td>table data</td>
    							<td>table data</td>
    							<td>table data</td>
    						</tr>
    
    					</tbody>
    				</table>
    
    			</div>
    
    			<div class="col">
    				<form>
    					<div class="form-group">
    						<label for="exampleInputEmail1">Email address</label>
    						<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    						<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    					</div>
    					<div class="form-group">
    						<label for="exampleInputPassword1">Password</label>
    						<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    					</div>
    					<div class="form-group form-check">
    						<input type="checkbox" class="form-check-input" id="exampleCheck1">
    						<label class="form-check-label" for="exampleCheck1">Check me out</label>
    					</div>
    					<button type="submit" class="btn btn-primary">Submit</button>
    				</form>
    
    			</div>
    		</div>
    	</div>
    
    	<div class="formcontain">
    		<form>
    			<div class="form-group" >
    				<label for="exampleInputEmail1">Email address</label>
    				<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    				<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    			</div>
    			<div class="form-group">
    				<label for="exampleInputPassword1">Password</label>
    				<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    			</div>
    			<div class="form-group form-check">
    				<input type="checkbox" class="form-check-input" id="exampleCheck1">
    				<label class="form-check-label" for="exampleCheck1">Check me out</label>
    			</div>
    			<button type="submit" class="btn btn-primary">Submit</button>
    		</form>
    	</div>
    
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    	<hr>
    
    	<h1>This is an H1 line.</h1>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
    
    </body>
    </html>

关于javascript - 下拉菜单不会下拉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54542721/

文章推荐： java - 自动生成表格

文章推荐： java - 如何将 glyphicon 添加到 spring struts 菜单

文章推荐： javascript - 嵌套数组的 include() 方法

JQuery 拉
我试图让我的 jQuery 脚本从单击的链接中提取 url，然后将其插入到我的视频标签中。有什么建议吗？我试过拼接我从 .html() 中得到的内容，但引号总是搞砸了。

Docker 拉 “unexpected EOF”
我遇到了 docker 的问题。场景是这样的:我们使用Codebuild+Packer+docker创建AMI，用于deploy。在这一步中，我们从 Artifactory 中提取图像，并且除了提取
Javascript 拉/推单个/多个
我目前正在学习 RxJS。在文档中，我找到了这个数组。我尝试在谷歌上搜索“pull and push javascript”，但我什至不知道如何调用这些实体/概念。我不明白那是什么意思？我假设 S
html - 推/拉 - 基础
Title 在小屏幕上，我首先需要标题，然后是文本字段，但在中等以上的屏幕上，我需要相反的方式 - 我已经尝试过推和拉，但它们无法工作 - 有什么想法吗？最佳答案根据 Swa
c++ - ZeroMQ 推/拉
zmq 的某些部分未以可预测的方式运行。我正在使用 VS2013 和 zmq 3.2.4。为了不在我的 pubsub 框架中“丢失”消息 [旁白:我认为这是一个设计缺陷。我应该能够首先启动我的订阅者
html - Bootstrap 嵌套列利用推/拉
我正在编写一个使用嵌套 Bootstrap 列的页面。我正在使用推/拉让列在移动设备上切换位置，而且效果很好。但是，在桌面上我遇到了一些奇怪的间距问题。嵌套列偏移到父列的右侧。我设置了一个 fidd
docker 拉: operation not permitted
在拉取一些 docker 镜像(但不是全部)时出现此错误: failed to register layer: Error processing tar file(exit status 1): op
docker - 无法从本地 docker 注册表推/拉
我创建了一个 Kubernetes 集群，并为每个节点安装了 docker。当我尝试使用 docker push local_registry_addr:port/image_id 将图像拉取或推送
mercurial - 何时隐式推/拉 Mercurial 书签？
没有明确地推/拉单个书签，书签何时从 repo 复制/更新到 repo？在我对两个本地存储库的测试中，我无法推断出一致的行为。有时从 A 到 B 或 B 到 A 的推/拉会复制/更新书签，有时不会。
html - Bootstrap 列排序的实际用例(推、拉)
在 Bootstrap 3 文档中，他们给出了以下使用 push 和 pull 类更改列顺序 (http://getbootstrap.com/css/#grid-column-ordering) 的
css - 拉/推中的 Bootstrap 故障
从这个问题开始Three column Bootstrap layout with left sidebar at bottom我了解了 Bootstrap 列推拉。下面的代码片段几乎可以得到我想要
python - 如何将单个选项传递给 gitpython 的推/拉？
许多 Repo 函数的签名包括 **kwargs，其中文档说，您可以将参数传递给底层包装的 git 命令。但是，*args 没有位置。为了传递类似标志的参数，如 --all。我原以为它们会像 my_r
android - 带进度条的 adb 推/拉
如果您将大文件推送/拉到设备上，这真的很烦人，现在无法知道它有多远。是否可以运行 adb push 或 adb pull 并使用“bar”实用程序获取进度条？这里的主要问题是我认为 adb 需要两个
heroku - 如何使用 Gitkrakent 推/拉 Heroku？
当我尝试使用 Gitkrakent 向/从 Heroku 推/拉时，GitKraken 告诉我: "Please log in to continue" 请求的“用户/登录”是什么？ (我个人 Her
docker - 拉 github 项目时 Jenkins 出现无效凭证错误
我在 docker 容器中有一个 Jenkins 2.150.1。要安装这个 Jenkins，我只需使用 jenkinsci/blueocean:1.9.0图片。我创建了一个管道，然后尝试使用我的
jenkins - 用 Jenkins 做 docker 拉
我想使用 Jenkins 做下一步: 1- docker pull 2- docker run -i -t 我已经在jenkins上安装了docker插件，但是这可行吗？ docker plugi
eclipse - 如何在本地 Mercurial 存储库中保留未提交的更改，同时仍然推/拉？
如果我正在处理一些我不想提交的文件，我只需保存它们。然后我有其他文件想要推送到服务器，但是如果其他人对存储库进行了更改，并且我将它们拉下来，它会要求我 merge 或 rebase ..但是这些选项中
拉 og :image 时 Facebook 错误
无论出于何种原因，我在 FB 上共享链接时尝试使用的图像都无法加载。给出的确切错误是: 提供了og:image，无法下载。发生这种情况的原因有多种，例如您的服务器使用不受支持的内容编码。爬虫接受 de
Android 4.3 ADB 推/拉
今天我买了三星 Galaxy Note 3，它配备了 Android 4.3。由于它太新了，我找不到根植我设备的方法，所以我尝试使用 adb 连接……我失败了。所以，我用了这个 D:\android
testing - Airflow 测试模式 xcom 拉/推不工作
我尝试通过 airflow cli test 命令测试 2 个任务` 第一个任务运行，自动将最后一个控制台推送到 xcom，我按预期在 Airflow GUI 中看到了值 some value 当我通

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 下拉菜单不会下拉