当前位置: 首页 > 面试题库 >

Bootstrap下拉菜单不起作用

孟智志
2023-03-14
问题内容

我无法正常使用下拉菜单。我可以使导航栏完美显示,但是当我单击“
Dropdown”(二者之一)时,它不会显示下拉菜单。我曾尝试查看有关此问题的其他文章,但没有什么能解决每个人的问题。我直接从bootstrap网站复制了源代码,但似乎无法在我的机器上使用它。谁有想法?我盯着它看了一个小时,似乎无法弄清楚问题出在哪里。

<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-    target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" >
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

问题答案:

也许尝试

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

看看是否行得通。



 类似资料:
  • 问题内容: 我复制了下拉菜单的官方Bootstrap 4示例,但它不起作用,没有任何内容被下拉。 问题答案: 编辑:万一其他人遇到这个问题,我相信OP的解决方案是他没有导入。 检查jQuery和所有相关的Bootstrap组件是否存在。还要检查控制台,并确保没有错误。

  • 主要内容:用法,实例,实例,选项,方法,实例Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的

  • 主要内容:实例,选项,实例,实例,更多实例本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。 如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单: 实例 <div class="dropdown"> <button type="button" c

  • 本文向大家介绍Bootstrap下拉菜单样式,包括了Bootstrap下拉菜单样式的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 效果图: Bootstrap下拉菜单的样式: 效果图: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 主要内容:实例,分割的按钮下拉菜单,实例,按钮下拉菜单的大小,实例,按钮上拉菜单,实例本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单,只需要简单地在一个 .btn-group 容器中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。 下面的实例演示了一个基本的简单的按钮下拉菜单: 实例 <div class="btn-group"> <button type="but

  • 问题内容: 通过使用twitter bootstrap 2的元素,可以有一个多级下拉菜单吗?原始版本没有此功能。 问题答案: 更新的答案 更新了支持v2.1.1 *引导程序版本样式表的答案。 **但是请小心,因为此解决方案已从v3中删除 只是想指出一点,因为最新的引导程序现在默认支持多级下拉菜单,因此不再需要此解决方案。如果您使用的是旧版本,则仍然可以使用它,但对于那些已更新到最新版本(在撰写本文