Question

我是前端开发的新手。我正在尝试使用bootstrap添加多级下拉菜单。这是我在互联网上找到的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

多级下拉列表无法正常工作

1 个答案: