草庐IT

javascript - Bootstrap 折叠导航栏不展开

coder 2023-08-08 原文

我是 Bootstrap 的新手，只是想让折叠的下拉导航栏正常运行。它完美地调整大小，一直到窗口太小以至于它触发所有导航栏元素被删除并放置在小数据切换按钮内。因为当我单击那个 lil' 数据切换按钮时，它不会像预期的那样展开并显示下拉列表中的元素。 

<nav class="navbar navbar-default" role="navigation">

            <div class="container-fluid">
                <div class="navbar-header logo">
                    <a class="navbar-brand" href="index.html"><img src="images/nastilogowhite.png" class="img-responsive" style="margin: 0 auto;"></a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                  </button>

                </div>   

                <div class="collapse navbar-collapse" id="nav-collapse">
                        <!-- Individual Navbar elements -->
                    <ul class="nav nav-justified nasti-nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li class="divider"></li>
                        <li><a href="familylaw.html">Family Law</a></li>
                        <li class="divider"></li>
                        <li><a href="criminallaw.html">Criminal Law</a></li>
                        <li class="divider"></li>
                        <li><a href="conveyancing.html">Conveyancing</a></li>
                        <li class="divider"></li>
                        <li><a href="about.html">About</a></li>
                        <li class="divider"></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div> 
            </div> <!-- Container fluid-->

        </nav>

我在所有页面上都使用了相同的代码，但出于某种原因，它只适用于本网站的主页。首页和其他页面的唯一区别是在<nav>下面。标签还有另一个内容 div，其中包含该页面的主要文本和图像。也就是说，当我从我的页面中删除此 div 的整个代码时，问题仍然存在，所以我认为不是......

我也可能(过度)使用冗余类，但这是以后的故事......

最佳答案

大多数时候，这是因为 jQuery 没有正确链接到页面。或者在jQuery.js之前引用了bootstrap.js。确保您正确链接了这些内容。

关于javascript - Bootstrap 折叠导航栏不展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26699619/

javascriptBootstrap34gtlthtmlcsstwitter-bootstrap

有关javascript - Bootstrap 折叠导航栏不展开的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - Sublime Text 3 多行法折叠 - 2

    所以...SublimeText具有折叠方法的内置功能，但是一旦方法声明跨越多行，它就会失去这种能力。有谁知道插件或使它工作的方法吗？具体来说，我在使用ruby​​时遇到了这个问题(我的团队遵守关于行长度的严格风格指南)，但语言应该无关紧要。 最佳答案 无需单击出现在函数定义第一行旁边的装订线中的向下箭头，您需要做的就是将光标放在函数的一个缩进行上(不是缩进的函数参数，而是在函数定义本身)并使用CtrlShift[键绑定(bind)(在OSX上使用⌘Alt[)折叠函数及其参数。使用CtrlShift](⌘Alt]在OSX上)展开，或

  4. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  7. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  8. ruby-on-rails - 在 Rails 3 中向 Active Admin 添加全局导航项的最佳方法是什么 - 2

    我正在尝试将全局导航菜单项添加到我的ActiveAdmin安装(在“仪表板”导航按钮旁边)。ActiveAdmin说这在他们的网站上是可能的，但他们没有任何关于如何实现它的文档。有谁知道如何做到这一点？编辑:抱歉，我应该更清楚。我想添加一个指向由任意文本/链接对组成的全局导航的链接。IE，如果我想添加一个链接到http://google.com在事件管理员的全局导航中使用文本“Google”，我将如何实现？ 最佳答案 ActiveAdmin.register_page"Google"domenu:priority=>1,:label

  9. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  10. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接？ - 2

    我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

随机推荐