Javascript I'；我试着用覆盖物打开侧面板，然后关闭

我正在尝试编写我自己的Shopify主题代码，在其中，我想在有人单击面板链接时创建不同的侧面板（都从右侧进入）。我在Stackoverflow上找到了一个面板和一个脚本（对不起，我是一个完全的新手），但现在我无法打开不同的面板。每个链接都会打开它们（很明显），但无法通过ID（我猜如何解决它）而不是类触发

我还想覆盖关闭面板。我只通过在每个面板中添加切换按钮来管理它

我的侧面板脚本

<script>
$(document).ready(function() {  
  function toggleSidebar() {
    $(".sidepanel-toggle").toggleClass("active");
    $(".overlay").toggleClass("active");
    $(".sidepanel").toggleClass("active");
    $("body").toggleClass("activeoverlay");
  }

  $(".sidepanel-toggle").on("click tap", function() {
    toggleSidebar();
  });

  $(document).keyup(function(e) {
    if (e.keyCode === 27) {
      toggleSidebar();
    }
  });

});
</script>

$（文档）.ready（函数（）{
函数toggleSidebar（）{
$（“.sidepanel toggle”）.toggleClass（“活动”）；
$（“.overlay”）.toggleClass（“活动”）；
$（“.sidepanel”）.toggleClass（“活动”）；
$（“body”）.toggleClass（“activeoverlay”）；
}
$（“.sidepanel toggle”）。打开（“点击”，函数（）{
切换侧边栏（）；
});
$（文档）.keyup（函数（e）{
如果（例如keyCode===27）{
切换侧边栏（）；
}
});
});

以及处理面板的HTML

  <a href="#" class="sidepanel-toggle">meta data</a>
  
  <aside id="extra_prod_meta" class="sidepanel">
    meta data
  </aside>

  <a href="#" class="sidepanel-toggle">Brand</a>

  <aside id="extra_prod_brand" class="sidepanel">
    meta data
  </aside>

元数据

$body=$（'body'）；
$（'a.sidepanel-toggle'）。打开（'click'，函数（e）{
e、 预防默认值（）；
设_this=$（this），
tg=_此数据（“面板”）；
addActivePanel（tg，_this）；
});
$（'.close，.overlay'）。在（'click'，function（）上{
removeActivePanel（）；
});
函数removeActivePanel（）{
$body.removeClass（'activeoverlay'）；
$（'a.sidepanel-toggle，aside'）.removeClass（'active'）；
}
功能addActivePanel（面板，btn）{
$body.addClass（'activeoverlay'）；
$（'#'+面板）.addClass（'active'）；
btn.addClass（“活动”）；
}

放在一边{
框大小：边框框；
宽度：200px；
身高：100%；
位置：固定；
排名：0；
右：-200px；
填充：1rem；
背景：#000；
颜色：#fff；
z指数：2；
过渡：对。3秒轻松；
}
主动的{
右：0；
}
.覆盖{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
背景：rgba（0,0,0,2）；
z指数：-1；
显示：无；
}
.activeoverlay.overlay{
显示：块；
z指数：1；
}
.结束{
文本对齐：右对齐；
光标：指针；
}

X
元数据额外产品品牌

因为您的目标是

类

，它们在您的示例中都有。向侧面板添加

数据属性

，或将

id作为目标。非常感谢。我现在更接近了：）我可以打开每个面板，但我不能关闭它们。当我在主体的顶部加载覆盖时，这将使第一个链接处于非活动状态。我已经在侧面板内添加了第二个切换链接，但当我单击该链接时，它将关闭覆盖而不是实际面板。。。编辑：我不得不将addClass更改为toggleClass。就像一个魔咒，只要包括一个按钮，触发你的
切换功能
，它就应该能工作。我已经包括了我认为你想要的东西。请查收。