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';
}

这是我用来验证点击是否在我的补充工具栏之外，但它什至不再显示的

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/

使用Javascript关闭侧边栏

1 个答案: