javascript - 使用 Javascript 关闭侧边栏

Question

我需要用 JavaScript 关闭侧边栏。我尝试使用以下代码，但是当我单击执行侧边栏打开的图标时，它不再打开它，因为立即执行了 display:none。

这是我用来打开和关闭边栏的代码:

function openNavCategories() { 
    const overlayContent = document.getElementById('overlayContent-categories');

    document.getElementById('nav-categories').style.width = '30%';
    overlayContent.style.display = 'block';
    overlayContent.style.width = '100%';
    document.getElementById('category-icon').style.display = 'none';
    document.getElementById('category-icon-open').style.display = 'block';
}

function closeNavCategories() {
    const navCategories = document.getElementById('nav-categories');
    navCategories.style.width = '0%';
    navCategories.style.transition = 'all 0.4s';
    document.getElementById('overlayContent-categories').style.display = 'none';
}

我尝试用这个来验证点击是否在我的 SideBar 之外，但它甚至不再显示它:

window.addEventListener('mouseup', function(event) {
    var SideBar = document.getElementById('nav-categories');
    if(event.target != SideBar && event.target.parentNode != SideBar ) {
        SideBar.style.display = 'none';
    }
})

这是我的 HTML 和 SCSS:

    <a href="#" class="closeBtn-categories" onclick="closeNavCategories()">X</a>

    <div id="overlayContent-categories" class="overlay__content-categories">
        <h2>Categorías</h2>
        <a href="#" onclick="closeNavCategories()">Categoría 1</a>
        <a href="#" onclick="closeNavCategories()">Categoría 2</a>
        <a href="#" onclick="closeNavCategories()">Categoría 3</a>
        <a href="#" onclick="closeNavCategories()">Categoría 4</a>
    </div>
</div>

SCSS:

    .overlay-categories {
      position: fixed;
      top:0;
      right:0; // de derecha
      width: 0%;
      height: 100%;
      background: rgba(0,0,0,.9);
      overflow-x: hidden;
      z-index: 10;
      transition: all 0.8s; 

      h2 {
        color: #506a80;
        margin: .2rem 0 .5rem 0rem;
      }

      a {
        padding: 10px;
        color: #ccc;
        font-size: 1rem;
        text-decoration: none;
        display:block;

        &:hover {
            color: #fff;
        }
      }

      .closeBtn-categories {
          position: absolute;
          top:20px;
          right: 35px;
          font-size: 2rem;
      }

      .overlay__content-categories {
          position: relative;
          display: none;
          top: 10%;
          width: 0%;
          text-align: center;
          margin-top: 20px;
          transition: all 2s linear;  
      }

  }

你能帮帮我吗？谢谢。

Answer 1

您可以为打开/关闭样式定义 css 类，而不是在脚本运行时操作样式属性。它让您可以将所有样式保留在 SCSS 中的一个位置。

  /* defined nav-categories__closed class*/
  #nav-categories{
    width: 30%;
    .overlayContent-categories{
      display: block;
      width: 100%;
    }
  }

  #nav-categories.nav-categories__closed{
    width: 0%;
    transition: all 0.4s;

    .overlayContent-categories{
      display: none;
    }
  }

修改 openNavCategories() 和 closeNavCategories() 以仅切换 nav-categories__closed

function openNavCategories() {
  const navCategories = document.getElementById('nav-categories');
  navCategories.classList.toggle('nav-categories__closed', false);

}

function closeNavCategories() {
  const navCategories = document.getElementById('nav-categories');
  navCategories.classList.toggle('nav-categories__closed', true);
}

当在侧边栏外执行点击时，您有第三个功能来关闭侧边栏。您可能需要修改函数以包括在检查中:如果事件目标也不是打开侧边栏的控件，则调用 closeNavCategories()。 closeNavCategories() 的目的和 mouseup 事件的核心部分或多或少做了同样的工作:关闭侧边栏。您可以通过引用相同的函数来消除重复代码。

示例:https://jsfiddle.net/rgfbLyon/5/