用Javascript关闭SideBar

Question

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

这是我打开和关闭SideBar的代码：

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/