我正在尝试使用覆盖打开侧面板并关闭

Question

我正在尝试编写自己的 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>

以及用于处理面板的 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>

Answer 1

$body = $('body');

$('a.sidepanel-toggle').on('click', function(e) {
    
  e.preventDefault();
  
  let _this = $(this),
      tg = _this.data('panel');
  
  addActivePanel(tg,_this);

});

$('.close, .overlay').on('click', function(){
    removeActivePanel();
});

function removeActivePanel(){
    
  $body.removeClass('activeoverlay');
  $('a.sidepanel-toggle, aside').removeClass('active');
  
}

function addActivePanel(panel,btn) {
    
  $body.addClass('activeoverlay');
  
  $('#'+panel).addClass('active');
  btn.addClass('active');
      
}

aside {
  box-sizing: border-box;
  width: 200px;
  height: 100%;
  position: fixed;
  top: 0;
  right: -200px;
  padding: 1rem;
  background: #000;
  color: #fff;
  z-index: 2;
  transition: right .3s ease;
}

aside.active {
  right: 0;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.2);
  z-index: -1;
  display: none;
}

.activeoverlay .overlay {
  display: block;
  z-index: 1;
}

.close {
  text-align: right;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="sidepanel-toggle" data-panel="extra_prod_meta">meta data</a>
  <div class="overlay"></div>
  <aside id="extra_prod_meta" class="sidepanel">
    <div class="close">X</div>
    meta data extra_prod_meta
  </aside>

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

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

您可以使用data-attributes 并定位正确的面板。

$('a.sidepanel-toggle').on('click', function(e) {

  e.preventDefault();
  
  let _this = $(this),
      tg = _this.data('panel');
  
  $('#'+tg).addClass('active');

})

.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="sidepanel-toggle" data-panel="extra_prod_meta">meta data</a>
  
  <aside id="extra_prod_meta" class="sidepanel">
    meta data
  </aside>

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

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