如何通过锚点链接打开过滤器内指定的Accordion面板？

你的核心问题出在页面加载时处理URL锚点（hash）的JS代码上，还有对Bootstrap Accordion组件的调用方式错误：

hash && $('ul.myfilter a[href="' + hash + '"]').panel-body('show');

这里有两个关键错误：

• panel-body不是有效的jQuery/Bootstrap方法，Bootstrap Accordion的面板展开方法是collapse('show')
• 你选择的是导航链接元素，而不是需要展开的Accordion面板本身

另外，还要注意页面加载顺序：必须等Bootstrap（你用到了data-toggle="collapse"，依赖Bootstrap）完全初始化后再执行锚点处理逻辑，否则collapse方法无法生效。

步骤1：修正目标页（hdmodels.html）的锚点处理JS #

替换你原有的hash处理代码为以下内容：

$(document).ready(function() {
  // 等待所有页面资源加载完成，确保Bootstrap组件已初始化
  $(window).on('load', function() {
    var hash = window.location.hash;
    // 验证hash存在且对应目标面板存在
    if (hash && $(hash).length) {
      // 展开指定的Accordion面板
      $(hash).collapse('show');
      // 延迟滚动到面板位置（避免面板展开前滚动导致位置偏差）
      setTimeout(function() {
        $('html, body').animate({
          scrollTop: $(hash).offset().top - 50 // 减50是为了避开顶部导航，可按需调整
        }, 300);
      }, 100);
    }
  });
});

步骤2：确保Accordion面板ID与跳转锚点完全匹配 #

确认目标页的Accordion面板ID和跳转链接的hash严格对应，比如你跳转用#collapse2，目标页必须有对应的面板：

<div id="collapse2" class="panel-collapse collapse">
  <div class="panel-body">
    FORTY EIGHT车型的详细内容
  </div>
</div>

步骤3：补全原页面的跳转链接hash #

比如原页面中ROADSTER的跳转链接缺少hash，需要补上：

<a class="orng-btn filt-bike-link" href="hdmodels.html#collapse4">Know More</a>

对应的目标页要添加id="collapse4"的Accordion面板。

步骤4：优化原页面的JS代码（可选） #

把多个重复的$(document).ready()合并，让代码更简洁高效：

$(document).ready(function() { 
  $(".rm-box").hide(); 

  $(".button").click(function(){ 
    var value = $(this).attr("data-filter"); 
    if (value == "all") { 
      $(".filters").hide('1000'); 
    } else { 
      $(".filters").not("." + value).hide("1000"); 
      $(".filters").filter("." + value).show("1000"); 
    } 
  }); 

  $("ul .button").click(function(){ 
    $(this).addClass('active').siblings().removeClass('active'); 
  });
});

• 确保你已经引入Bootstrap的JS文件（放在jQuery之后），因为data-toggle="collapse"依赖Bootstrap：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

这样修改后，点击跳转链接就能正确打开指定的Accordion面板，并且准确定位到对应位置了。

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