多级下拉菜单不起作用

Question

我是前端开发的新手。 我正在尝试使用引导程序添加多级下拉菜单。这是我在互联网上找到的正在使用的 Haml 代码。 当我点击Header 4 时，我能够获得第一级下拉菜单，但是如果我点击Sub Heading 1，它不会显示第二级下拉菜单，而是关闭父下拉菜单。

%nav.navbar.navbar-inverse.sidebar
  .container-fluid
    %a.navbar-brand{:href => "#"} API Reference
    #bs-sidebar-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li.active
          %a{:href => "#"}
            Header 1
        %li
          %a{:href => "#"}
            Header 2
        %li
          %a{:href => "#"}
            Header 3
        %li.dropdown
          %a.dropdown-toggle{"data-toggle" => "dropdown", :href => "#"}
            Header 4
            %span.caret
          %ul.dropdown-menu
            %li.dropdown
              %a.dropdown-toggle{"data-toggle" => "dropdown", :href => "#"}
                Sub Heading 1
                %span.caret
              %ul.dropdown-menu
                %li
                  %a{:href => "#"} Sub Sub Heading 1
                %li
                  %a{:href => "#"} Sub Sub Heading 2
                %li
                  %a{:href => "#"} Sub Sub Heading 3
            %li
              %a{:href => "#"} Sub heading 2

.main
  / Main content goes here..

代码给出以下输出：

不确定，我该如何让它工作。我在现有的解决方案中没有使用过 Javascript。

如果有人不熟悉haml，可以使用http://htmltohaml.com/查看html中的代码

Answer 1

您只使用dropdown-menu 类，但您也应该使用dropdown-submenu。

例如，请参阅：https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h