JavaScript函数只是打开了Canva菜单中的一个

我构建了两个offcanvas侧边栏，其中一个位于右侧，包括webapp的正常菜单，第二个应该是通知侧边栏，问题是，左侧的侧边栏工作正常。当我点击汉堡包图标时，它会打开左侧边栏，但当我点击另一个图标时，什么都没有发生，右侧边栏不会打开，谷歌浏览器控制台不会显示任何错误

第一个是链接，它打开了左边的边栏，到目前为止还可以使用。右边是通知侧栏，它不会打开

CSS

---

在CSS中再添加一个类

.notification-sidebar.active{
  transform: translateX(0); 

}

这将解决问题

---

问题是，您的

.active

css类仅对您拥有的第一个侧栏有效。例如，您必须创建第二个。这会解决它的

CSS

.notification-sidebar.active{
  transform: translateX(0); 
}

<div class="notification-sidebar">
    
    <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Models</a></li>
        <li><a href="#">Kunden</a></li>
        <li><a href="#">Finanzen</a></li>
        <li><a href="#">Mitarbeiter</a></li>
        <li><a href="#">Einstellung</a></li>
    </ul>
    
</div>

// Toggle Pulse Sidebar

$('#open-pulse-sidebar').click(function() {
  $('.pulse-sidebar').toggleClass('active')
})

$(document).click(function(e) {
  var sidebar = $(".pulse-sidebar, #open-pulse-sidebar");
  if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
    sidebar.removeClass('active')
  }
});

// Toogle Notification Sidebar

$('#open-notification-sidebar').click(function() {
  $('.notification-sidebar').toggleClass('active')
})

$(document).click(function(e) {
  var sidebar = $(".notification-sidebar, #open-notification-sidebar");
  if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
    sidebar.removeClass('active')
  }
});

.pulse-sidebar {
  height: 100%;
  width: 19.24em;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  transform: translateX(-120%);
  transition: all 0.4s ease-in;
  -webkit-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
}

.notification-sidebar {
  height: 100%;
  width: 19.24em;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  background-color: #fff;
  overflow-x: hidden;
  transform: translateX(120%);
  transition: all 0.4s ease-in;
  -webkit-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
}

.notification-sidebar.active{
  transform: translateX(0); 

.notification-sidebar.active{
  transform: translateX(0); 
}