javascript - 第二层侧边栏

Question

我想创建一个侧边栏，其中的子菜单向右延伸而不是向下延伸。下图粗略:

我是 flexbox 的新手，这就是我能想到的:

HTML:

    <div class="d-flex align-items-stretch">
      <nav class="side-navigation">
        <ul class="sidebar-nav d-flex flex-column">
          <li class="sidebar-nav-expand d-flex toggle">
            <a class="nav-link sidebar-nav-expand-toggle py-3" href="#">
              <span class="icon icon-ic_compute"></span>
              <span class="nav-item-text">Menu1</span>
              <span class="float-right"><i class="fas fa-mortar-pestle"></i></span>
            </a>
            <div class="sidebar-nav-expand-items">
              <ul class="sidebar-nav">
                <li class="sidebar-nav-item py-3">
                  <a class="nav-link py-1" href="#some-url1">
                    <span class="nav-item-text">Menu1 subitem1</span>
                  </a>
                </li>
                <li class="sidebar-nav-item py-3">
                  <a class="nav-link py-1" href="#some-url2">
                    <span class="nav-item-text">Menu1 subitem2</span>
                  </a>
                </li>
                <li class="sidebar-nav-item py-3">
                  <a class="nav-link py-1" href="#some-url3">
                    <span class="nav-item-text">Menu1 subitem3</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="sidebar-nav-expand d-flex">
            <a class="nav-link sidebar-nav-expand-toggle py-3" href="#">
              <span class="icon icon-ic_management"></span>
              <span class="nav-item-text">Menu2</span>
              <span class="float-right"><i class="fas fa-mortar-pestle"></i></span>
            </a>
            <div class="sidebar-nav-expand-items">
              <ul class="sidebar-nav">
                <li class="sidebar-nav-item py-3">
                  <a class="nav-link py-1" href="#some-url21">
                    <span class="nav-item-text">Menu2 subitem1</span>
                  </a>
                </li>
                <li class="sidebar-nav-item py-3">
                  <a class="nav-link py-1" href="#some-url22">
                    <span class="nav-item-text">Menu2 subitem2</span>
                  </a>
                </li>
                <li class="sidebar-nav-item py-3">
                  <a class="nav-link py-1" href="#some-url23">
                    <span class="nav-item-text">Menu2 subitem3</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="sidebar-nav-expand">
            <a class="nav-link py-3" href="#some-url">
              <span class="icon icon-ic_administration"></span>
              <span class="nav-item-text">Direct link</span>
              <span class="float-right"><i class="fas fa-mortar-pestle"></i></span>
            </a>
          </li>
        </ul>
      </nav>
      <div class="main">
        Content
      </div>
    </div>

SCSS:

$white: #fff;
$whitesmoke: #ECEFF1;
$aliceblue: #f1f6ff;
$light-gray: #D6DADC;
$blue: #2971FB;
$light-blue: #BFD5FE;
$black: #263238;
$light-black: #364046;
$orange: #FF8F00;

.side-navigation {
  max-width: 540px;
  transition: all 0.3s;
}

.sidebar-nav {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;

  .nav-link {
    display: block;
    padding: .75rem 1rem;
    color: $white;
    text-decoration: none;
    background: 0 0;

    &:hover {
      color: $orange;
    }
  }

  .sidebar-nav-item {
    width: 100%;
  }

  .sidebar-nav-expand {
    width: 100%;
    background-color: $black;

    &.toggle {
      .sidebar-nav-expand-toggle {
        color: $orange;
      }
      .sidebar-nav-expand-items {
        margin-left: 0;
      }
    }

    .sidebar-nav-expand-toggle {
      width: 270px;
      z-index: 2;
    }

    .sidebar-nav-expand-items {
      width: 270px;
      height: 100%;
      background-color: $light-gray;
      transition: margin-left .25s ease-in-out;
      margin-left: -270px;
      color: $black;

      .nav-link {
        color: $black;

        &:hover {
          color: $orange;
        }

        &:not(.active) {
          margin-left: 8px;
        }
        &.active {
          border-left: solid 8px $orange;
        }
      }
    }
  }
}

.main {
  width: 100%;
  min-height: 100vh;
  padding-left: 10px;
}

JS:

    $('.sidebar-nav-expand-toggle').on('click', function() {
        let self = $(this);
        self.parent('.sidebar-nav-expand').toggleClass('toggle');
        $('.main').toggleClass('toggle');
    });

https://jsfiddle.net/cj4375er/

如您所见，子菜单未正确隐藏在父菜单下，子菜单堆叠在一起，如果打开一个菜单，我希望关闭所有其他菜单。此外，菜单项之间的空间太大。我只需要在正确的方向上指出一些要点。如果有类似案例的例子，我会很高兴。

Answer 1

我看到您试图在 sidebar-nav-expand-toggle 处使用 z-index: 2 来覆盖子菜单栏。但是，您的元素没有正确隐藏，因为您的 sidebar-nav-expand-toggle 没有背景(即它是透明的)。背景实际上来自 sidebar-nav-expand (#263238)，它渗透了 sidebar-nav-expand-toggle 因为 sidebar-nav-expand-toggle 是透明的。因此，解决方案是指示 sidebar-nav-expand-toggle 继承与其父级相同的背景，导致以下代码:

.sidebar-nav-expand-toggle {
  width: 270px;
  z-index: 2;
  background: inherit;
}

你的菜单是堆叠的，因为你没有处理其他可能打开的子菜单的关闭(你只是切换了被点击的子菜单，但你没有关闭那些可能打开但没有被点击的子菜单)。对您的 JS 代码进行简单添加即可解决此问题:

$('.sidebar-nav-expand-toggle').on('click', function() {
  let self = $(this);
  let toggled = self.parent('.sidebar-nav-expand').hasClass('toggle')

  hideAllSubmenu()

  if (toggled) 
    self.parent('.sidebar-nav-expand').removeClass('toggle')
  else 
    self.parent('.sidebar-nav-expand').addClass('toggle')

  $('.main').toggleClass('toggle');
});

function hideAllSubmenu() {
  let submenus = $('.sidebar-nav-expand-toggle')
  submenus.parent('.sidebar-nav-expand').removeClass('toggle')
}

菜单项之间的空间太大。我的建议是制作一个只有三个带填充的菜单项的 flexbox。然后，对于每个菜单(可以是 a 或 div)，在其中创建一个 div，它具有 position: absolute 基于这些菜单。然后，您可以使用 transform:translate 在单击时将其滑出。这样，高度就不再依赖于包装容器的高度。

此外，我看到您正在使用 SCSS。我真的建议阅读 BEM selectors here更好地利用 SCSS 来创建更易于阅读的代码。

编辑:

我已经添加了一个小的工作示例来说明我使用 position: absolute 的意思，并且在子菜单展开时仍然能够将主要内容推到右边。请看下面(请根据您的需要调整这个最小的工作示例):

function resetSubmenuStyles() {
  let submenus = document.querySelectorAll('.submenu div')
  for (let submenu of submenus) {
    submenu.style.width = ''
    submenu.style.visibility = ''
  }
}

document.querySelector('#menuOne').addEventListener('click', e => {
  let submenu = document.querySelector('.submenu')
  let submenuOne = document.querySelector('#submenuOne')
  let submenuStyle = window.getComputedStyle(submenuOne)
  let submenuWidth = parseInt(submenuStyle.getPropertyValue('width')) - parseInt(submenuStyle.getPropertyValue('padding-left')) - parseInt(submenuStyle.getPropertyValue('padding-right'))
  
  resetSubmenuStyles()
  if (submenuWidth == 0) {
    submenu.style.width = '20%'
    submenuOne.style.width = '100%'
    submenuOne.style.visibility = 'visible'
  }
  else {
    submenu.style.width = ''
    submenuOne.style.width = ''
    submenuOne.style.visibility = ''
  }
})

document.querySelector('#menuTwo').addEventListener('click', e => {
  let submenu = document.querySelector('.submenu')
  let submenuTwo = document.querySelector('#submenuTwo')
  let submenuStyle = window.getComputedStyle(submenuTwo)
  let submenuWidth = parseInt(submenuStyle.getPropertyValue('width')) - parseInt(submenuStyle.getPropertyValue('padding-left')) - parseInt(submenuStyle.getPropertyValue('padding-right'))
  resetSubmenuStyles()
  if (submenuWidth == 0) {
    submenu.style.width = '20%'
    submenuTwo.style.width = '100%'
    submenuTwo.style.visibility = 'visible'
  }
  else {
    submenu.style.width = ''
    submenuTwo.style.width = ''
    submenuTwo.style.visibility = ''
  }
})

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif;
}

html, body {
  width: 100vw;
  height: 100%;
}

body {
  display: flex;
}

.menu {
  width: 20%;
  height: 100%;
  background: #000;
  color: #FFF;
}

.menu h1 {
  padding: 20px;
  cursor: pointer;
}

.submenu {
  position: relative;
  width: 0%;
  height: 100%;
  background: #333;
  color: #FFF;
}

.submenu div {
  visibility: hidden;
  position: absolute;
  width: 0;
  top: 0;
  left: 0;
  padding: 20px;
}

<div class = "menu">
  <h1 id = "menuOne">Test</h1>
  <h1 id = "menuTwo">Test</h1>
</div>

<div class = "submenu">
  <div id = "submenuOne">
    Submenu Test One
  </div>
  
  <div id = "submenuTwo">
    Submenu Test Two
  </div>
</div>

<div id = "main">Some Content</div>