Question

我正在尝试在基于引导程序的Web应用程序中的pug文件中设置侧面导航菜单的样式。我的目标是一次只能将一个子菜单切换为活动状态。

这是我的哈巴狗局部页面：

.sidebar
   li.item(id="reportsmenu")
    a(class="dropdown" data-toggle="show" aria-expanded="false" href="#reportsmenu") Reports
    ul.submenu
      li.item
       a(href='/reports/overview') Overview
      li.item
       a(href='/reports/add') Add Reports
      li.item
       a(href='/reports/manage') Manage Reports       
   li.item
    a(class="dropdown-toggle" href="#") Video
    ul.submenu
      li.item
       a(href='/video/overview') Overview
      li.item
       a(href='/video/live') Live Video
      li.item
       a(href='/video/saved') Saved Video
   li.item
    a(class="dropdown-toggle" href="#") Automation
    ul.submenu
      li.item
       a(href='/automation/overview') Overview
   li.item
    a(class="dropdown-toggle" href="#") Notifications
    ul.submenu
      li.item
       a(href='/notifications/overview') Overview
      li.item
       a(href='/notifications/add') Add Notifications
      li.item
       a(href='/notifications/edit') Edit Notifications   
   li.item
    a(class="dropdown-toggle" href="#") Locations
    ul.submenu
      li.item
       a(href='/locations/overview') Overview
      li.item
       a(href='/locations/add') Add Location
      li.item
       a(href='/locations/edit') Manage Location
      li.item
    a(class="dropdown-toggle" href="#") Equipment
    ul.submenu
      li.item
       a(href='/equipment/overview') Overview
      li.item
       a(href='/equipment/add') Add Equipment
      li.item
       a(href='/equipment/edit') Manage Equipment
   li.item
    a(class="dropdown-toggle" href="#") Users
    ul.submenu
      li.item
       a(href='/users/overview') Overview
      li.item
       a(href='/users/add') Add Users
      li.item
       a(href='/users/edit') Manage Users   
   li.item
    a(href='/account') My Account
   li.item
    a(href='/settings') Settings
   li.item
    a(href='/help') Help

到目前为止，我已经尝试过添加一个javascript文件来仅在第一个.active上切换一个额外的ul类作为测试，这似乎在我的主布局中没有任何作用，侧边栏是包括在内。也涌入了各种教程，但是将其中的很多翻译为pug格式有些令人沮丧。

这是主要布局：

doctype html
html
  head
    title Company Site
    link(rel='stylesheet' href='/bower_components/bootstrap/dist/css/bootstrap.css')
    link(rel='stylesheet' href='/css/style.css')
    script(src='/bower_components/jquery/dist/jquery.js')
    script(src='/bower_components/bootstrap/dist/js/bootstrap.js')
    script(src='/js/main.js')
  body
    nav.navbar.navbar-inverse
      .navbar-container
        .navbar-header
          button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='/') Company
        #navbar.collapse.navbar-collapse

          ul.nav.navbar-nav.navbar-right
            if user
              li
                a(href='/users/logout') Logout 
            else
              li
                a(href='/users/register') Register
              li
                a(href='/users/login') Login
    .sidebar-container
      include partials/sidebar
    .content-container
      != messages('message', locals)
      if errors
        each error, i in errors
          div(class='alert alert-danger') #{error.msg}
      block content
        br
        hr
    footer
      p &copy; 2019 Company, Inc

到目前为止，当我加载索引页面时，唯一发生的事情是出现了侧边栏，并且侧边栏中的每个父项都是可单击的。 Reports部分可以单击一次，然后再次单击就消失了。

任何指向这里去的指针将不胜感激！让我知道使用CSS是否也会有所帮助。

帕格-子菜单切换

0 个答案: