Question

我有一个可以打开导航栏的工作按钮。网址为example.com或example.com/blog时，此方法有效，但如果网址为example.com/blog/blog-piece（URL的多个扩展名），则该按钮不起作用。控制台不会报告任何错误。就像单击事件没有被捕获一样。我对此感到困惑，并且想知道javascript是否正在通过事件冒泡或其他方式来做一些有趣的事情。谢谢

按钮与此网址一起使用 working url 按钮不适用于此网址 url doesn't work url doesn't work

const globalWrapper = document.querySelectorAll('.global-wrapper');
const sidebarBtn = document.querySelectorAll('.sidebar__btn');
const sidebarWrapper = document.querySelectorAll('.sidebar-wrapper');
const sidebarOverlay = document.querySelectorAll('.sidebar-overlay');

document.addEventListener('click', (e) => {

   if (e.target.closest('.sidebar__btn')) {
      openSidebar();
   }
   if (e.target.closest('.close')) {
      openSidebar();
   }
   if (e.target.closest('.sidebar-overlay__visible')) {
      openSidebar();
   }
   if (e.target.closest('.sidebar-link')) {
      openSidebar();
   }

});

function openSidebar() {
   for (let i = 0; i < sidebarBtn.length; i++) {
      sidebarWrapper[i].classList.toggle('sidebar-transform');
      sidebarOverlay[i].classList.toggle('sidebar-overlay__visible');
      globalWrapper[i].classList.toggle('wrapper-transform');
   }
}

助手类

.sidebar-transform
{
    transform: translateX(0px);

    @include MQ(s)
    {
        transform: translateX(0vw);
    }
}

.wrapper-transform
{
    transform: translateX(-414px);
}

.sidebar-overlay__visible
{
    position: fixed;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    opacity: .5;
    background-color: $brand-1;
}

Answer 1

从图片中所示的URL看来，正在使用不同的方法来服务不同的页面（某些是静态的，有些不是？）。由于JS文件中没有任何内容可以根据URL运行或不运行，因此我认为JS文件很可能没有加载到静态页面上

网址深达多层时，Navbar无法打开

1 个答案: