问题：

如何使3级折叠菜单在引导？

景阳曜

2023-03-14

我试图为Bootstrap制作一个3级折叠导航栏菜单，但我无法打开第三级。

这是我的两级菜单：

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <div class="nav-collapse">
        <ul class="nav">
          <a class="brand" href="#">Present Ideas</a>
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Help</a></li>
          <li class="dropdown" id="accountmenu">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Login</a></li>
              <li><a href="#">Register</a></li>
              <li class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav pull-right">

        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>
</div>

我认为这样做会奏效：

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Help</a></li>
          <li class="dropdown" id="accountmenu">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Login</a></li>
              <li class="item-148 dropdown parent">
                <a href="/about/learn-more">Learn more&nbsp;<b class="caret-right"></b></a>
                <ul class="dropdown-menu">
                  <li class="item-149"><a href="/about/learn-more/the-software">The Software</a></li>
                  <li class="item-150"><a href="/about/learn-more/the-project">The Project</a></li>
                  <li class="item-151"><a href="/about/learn-more/the-leadership">The Leadership</a></li>
                  <li class="item-152"><a href="/about/learn-more/open-source-matters">Open Source Matters</a></li>
                </ul>
              </li>
              <li class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav pull-right">

        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>
</div>

但这不起作用。

共有2个答案

袁晟

2023-03-14

Bootstrap3放弃了对嵌套折叠菜单的本机支持，但有一种方法可以使用第三方脚本重新启用它。这叫智能菜单。这意味着向页面添加三个新资源，但它无缝地支持Bootstrap3。x具有嵌套

<head>
   ...
   <script src=".../jquery.smartmenus.min.js"></script>
   <script src=".../jquery.smartmenus.bootstrap.min.js"></script>
   ...
   <link rel="stylesheet" href=".../jquery.smartmenus.bootstrap.min.css"/>
   ...
</head>

这是一个演示页面：http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html

微生德运

2023-03-14

引导程序2.3。x及更高版本支持下拉子菜单。。

<ul class="dropdown-menu">
            <li><a href="#">Login</a></li>
            <li class="dropdown-submenu">
                <a tabindex="-1" href="#">More options</a>
                <ul class="dropdown-menu">
                    <li><a tabindex="-1" href="#">Second level</a></li>
                    <li><a href="#">Second level</a></li>
                    <li><a href="#">Second level</a></li>
                </ul>
            </li>
            <li><a href="#">Logout</a></li>
</ul>

Bootply.com工作演示

类似资料：

Bootstrap 3折叠菜单在单击时不会关闭

问题内容：我在Bootstrap 3中有或多或少的标准导航它通常会在较小的设备上崩溃。单击菜单按钮可展开菜单，但是如果我单击（或触摸）菜单链接，菜单将保持打开状态。要关闭它又该怎么办？问题答案： Bootstrap的默认设置是在单击菜单项时保持菜单打开。您可以通过调用要折叠的jQuery元素来手动覆盖此行为。
引导导航折叠-菜单项在切换下拉菜单中不对齐

我实现了这个Bootstrap 3 Navbar折叠来改变Navbar折叠，但我有一个问题，在nav上的切换。我为最小宽度：992px放入这个，使我的菜单悬停打开，而不是切换桌面大小。我遇到的问题是，当我在sm大小中切换一个菜单项时。下拉菜单不会直接切换到下面。它会在右手边爆炸。我似乎找不到什么是css选择器，它直接放在下面，而其他项目“移开的方式” 这就是正在发生的事情我要这个是SM号的
高级折叠

在上一章里我们用Vim的indent折叠方式，在Potion文件中增加了一些快捷而肮脏的折叠。打开factorial.pn并用zM关闭所有的折叠。文件现在看起来就像这样： :::text factorial = (n): +-- 5 lines: total = 1 10 times (i): +-- 4 lines: i string print 展开第一个折叠，它看上去会是这样： :
Angular custome dirictive css折叠子菜单

我跟随这篇文章https://medium.com/@alok.lko631/submenu-or-dropdown-menu-without-jquery-in-angular-2-4-5-6-using-only-bootstrap-and-custom-FD716DB511BE来折叠菜单和子菜单。我能够实现逻辑，但我面临的问题是，我有多个菜单和点击另一个菜单（已经打开的菜单没有被折叠），而且
如何在单击按钮时显示引导折叠div？

我有下面的div，希望在单击按钮时显示它。我在按钮点击事件中使用这个jquery代码。 $（'.container collapse'）。removeClass（'.container collapse'）。addClass（“容器”）；为什么现在不显示div，因为我已经改变了类？它抛出一个错误未捕获的类型错误：$（...）。
JS+CSS实现的简单折叠展开多级菜单效果

本文向大家介绍JS+CSS实现的简单折叠展开多级菜单效果，包括了JS+CSS实现的简单折叠展开多级菜单效果的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果。分享给大家供大家参考。具体如下：这是一款JS+CSS实现的多级折叠菜单，可折叠展开/合拢，没有引用任何的外部文件，也没有用到图片，虽然简单，而且还有些粗糙，但核心的东西已经展示给大家了，正在研究

如何使3级折叠菜单在引导？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档