如何通过子折叠面板Fragment URL触发打开对应主折叠面板？

看起来你遇到的核心问题是：当通过子面板的Fragment URL直接访问页面时，主折叠面板仍处于关闭状态，导致子面板内容被隐藏。你的现有脚本因为硬编码了主面板ID且选择器有误，所以没能解决问题。我们可以通过建立子面板与主面板的关联逻辑来修复这个问题。

问题分析 #

当页面加载时，浏览器只会定位到锚点对应的元素，但不会自动处理父级折叠面板的展开状态。你的子面板嵌套在主面板的.inhalt容器中，主面板关闭时这个容器是隐藏的，所以即使锚点定位到子面板，用户也看不到内容。

修正方案 #

我们需要做两件事：

1. 当URL锚点是子面板时，先找到它对应的主面板
2. 先触发主面板展开，再触发子面板展开

方案1：基于DOM结构自动关联（推荐，无需修改HTML） #

利用子面板在主面板.inhalt容器内的结构关系，向上遍历DOM找到对应的主面板触发按钮：

$(document).ready(function() {
  // 获取当前URL的锚点部分
  const hash = window.location.hash.slice(1); // 去掉#号
  if (!hash) return;

  const targetElement = $('#' + hash);
  // 如果目标元素是子面板，找到对应的主面板
  if (targetElement.length && targetElement.closest('.inhalt').siblings('.balken').length) {
    // 找到主面板的触发链接
    const mainAccordionTrigger = targetElement.closest('.inhalt').siblings('.balken').find('a');
    // 先触发主面板展开
    if (mainAccordionTrigger.length) {
      mainAccordionTrigger.trigger('click');
    }
    // 再触发子面板展开
    targetElement.trigger('click');
  } else {
    // 如果是主面板锚点，直接触发展开
    targetElement.trigger('click');
  }
});

方案2：通过data属性手动关联（更灵活，适合复杂结构） #

如果你的DOM结构不固定，可以给子面板的链接添加data-main-accordion属性指定对应的主面板ID：

修改HTML：

<div class="balken">
  <div class="balkenclosed">
    <a id="sub1A" data-main-accordion="test1_main" style="text-decoration:none; color:black;" href="#sub_1_A"> Sub 1 A element</a>
  </div>
</div>

对应的脚本：

$(document).ready(function() {
  const hash = window.location.hash.slice(1);
  if (!hash) return;

  const targetLink = $('#' + hash);
  if (targetLink.length) {
    // 检查是否有指定的主面板
    const mainAccordionId = targetLink.data('main-accordion');
    if (mainAccordionId) {
      // 先展开主面板
      $('#' + mainAccordionId).trigger('click');
    }
    // 展开目标面板
    targetLink.trigger('click');
  }
});

为什么你的原脚本无效？ #

• 选择器错误：$('test1_main')缺少#，应该是$('#test1_main')
• 硬编码主面板ID：无法适配多个子面板对应不同主面板的场景
• 没有等待DOM加载完成：应该把代码放在$(document).ready()中，确保元素都已渲染

测试提示 #

确保你的折叠面板展开/关闭的逻辑是通过点击.balken内的链接触发的，并且点击后会切换.inhalt容器的显示状态。这样上面的脚本才能正确触发展开动作。

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