Shopify移动端点击<a>标签后关闭侧边栏的解决方案求助

你的侧边栏依赖checkbox的checked状态控制显示，但当前存在两个重复ID的checkbox（违反HTML规范），且纯HTML无法实现点击链接后改变checkbox状态，需要结合JS和必要CSS完成需求，以下是具体方案：

1. 修复HTML重复ID问题 #

HTML中ID必须唯一，你有两个id="menu_toggle"的checkbox，需修改内部checkbox的ID及对应label的关联属性：

<!-- 外部触发侧边栏的checkbox -->
<input type="checkbox" class="menu_btn" id="menu_toggle">

<!-- 内部关闭按钮的checkbox，修改ID -->
<input type="checkbox" class="menu_btn" id="menu_toggle_inner" checked>

同步修改内部label的for属性：

<label for="menu_toggle_inner" class="inside_menu_icon menu_icon">
  <span class="menu inside_menu"></span>
</label>

2. 添加基础CSS控制侧边栏显示/隐藏 #

补充以下样式实现侧边栏的显示逻辑（适配移动端）：

/* 隐藏原生checkbox */
.menu_btn {
  display: none;
}

/* 默认隐藏侧边栏遮罩 */
.sideBar_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

/* 默认将侧边栏隐藏在屏幕右侧 */
.sideBar {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: #fff;
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}

/* 外部checkbox选中时，显示遮罩和侧边栏 */
#menu_toggle:checked ~ .sideBar_overlay {
  display: block;
}
#menu_toggle:checked ~ .sideBar_overlay .sideBar {
  right: 0;
}

/* 桌面端隐藏侧边栏相关元素（按需调整断点） */
@media (min-width: 768px) {
  .sideBar_overlay, .menu_icon {
    display: none;
  }
}

3. 添加JS实现点击链接关闭侧边栏 #

在页面底部或区块的JS区域添加以下代码，监听侧边栏内链接的点击事件，重置checkbox状态：

// 监听侧边栏内所有目标链接的点击
document.querySelectorAll('.sideBar .link_title').forEach(link => {
  link.addEventListener('click', () => {
    // 取消外部checkbox选中状态，关闭侧边栏
    document.getElementById('menu_toggle').checked = false;
    // 同步重置内部checkbox状态
    document.getElementById('menu_toggle_inner').checked = true;
  });
});

修改后的完整HTML代码 #

<div class="section--divider">
<div class="sideBar_container">

  <input type="checkbox" class="menu_btn" id="menu_toggle">

  <label for="menu_toggle" class="menu_icon">
    <h4 class="video-coll">Videos Collection</h4>
    <span class="menu"></span>
  </label>

  <div class="sideBar_overlay" id="sideBar_overlay">
    <div class="sideBar" id="sideBar">
      <h4 class="sideBar_title">{{section.settings.title}}</h4>

      <input type="checkbox" class="menu_btn" id="menu_toggle_inner" checked>
      <label for="menu_toggle_inner" class="inside_menu_icon menu_icon">
        <span class="menu inside_menu"></span>
      </label>

      <div class="sideBar_inner">
        <div class="top_menu">
          <ul>
            <div class="link_details">
              <li><a class="link_title" id="bastesho" href="#video_text_block_{{ forloop.index }}">{{ block.settings.title }}</a></li>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
  
<div class="page-width">
  <div class="section-header text-left">
    <h2>{{ section.settings.title }}</h2>
  </div>
  <div class="">
    <div class="index-section" id="video_text_block_{{ forloop.index }}">
      <div class="page-width feature-row-wrapper">
        <div class="feature-row__item" style="max-width: 530px" data-aos>
          <div>
            <div class="image-wrap" style="height: 0; padding-bottom:56.623%">
              {% if block.settings.video_url contains 'youtube' %}
                <iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?vq=720" width="530" height="300" frameborder="0" allowfullscreen></iframe>
              {% elsif block.settings.video_url contains 'vimeo' %}
                <iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?color={{ settings.color_button | remove: "#" }}&byline=0&portrait=0&badge=0" width="530" height="300" frameborder="0" allowfullscreen></iframe>
              {% else %}
                <iframe src="//www.youtube.com/embed/_9VUPq3SxOc?vq=720" width="530" height="300" frameborder="0" allowfullscreen></iframe>
              {% endif %}
            </div>
          </div>
        </div>
        
        <div class="feature-row">
          <div class="feature-row__item feature-row__text feature-row__text--{{ block.settings.layout }} text-{{ block.settings.align_text }}" data-aos>
            <div class="subheading appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.subtitle }}</div>
            <div class="h1 appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.title | escape }}</div>
            <div class="rte appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.text }}</div>
            <div class="appear-delay{% cycle '','-1','-2','-3','-4' %}">
              <a href="{{ block.settings.button_link }}" class="btn{% if block.settings.button_style == 'secondary' %} btn--tertiary{% endif %}">
                {{ block.settings.button_label }}
              </a>
            </div>
          </div>
          {{ video_layout }}
        </div>
      </div>
    </div>
  </div>
</div>

额外说明 #

• 修复了重复ID问题，确保HTML符合规范
• CSS实现了侧边栏的平滑过渡显示/隐藏逻辑
• JS通过修改checkbox状态实现点击链接关闭侧边栏的需求
• 优化了视频iframe的渲染逻辑，避免重复输出

内容的提问来源于stack exchange，提问作者Alireza Akbari