使用 Link 在页面加载时展开某些 Div

Question

我有一个页面有几个 div 可以 expand/collapse 单击。有些情况下，我想在某个 div 已经展开的锚点进入页面。

例如，一个 div 用于页面中间的某个视频系列。我希望能够与某人共享 link，以便他们可以访问锚定到此视频系列的页面，其中 div 已经展开以显示视频系列中的各种模块。

感谢任何帮助！我尝试了几种不同的方法，但没有任何效果。

HTML:

<a name="TLS"></a> 

<a data-toggle="collapse" data-parent="#accordion" href="#collapsefoundationallearning" aria-expanded="false" aria-controls="collapsefoundationallearning">Foundational Learning Video Series</a> <br>
                  
<div id="collapsefoundationallearning" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<a href="">Module 1</a>
<br><a href="">Module 2</a>
<br><a href="">Module 3</a>
</div>

我试过了，但无法正常工作。

<script>

jQuery(document).ready(function() {
    var url = document.location.toString();
    if ( url.match('#') ) {
        var hash = url.split('#')[1];

        // collapse the expanded panel
        $('#accordion .accordion-collapse').removeClass('in');

        // expand the requested panel
        $('#' + hash).addClass('in');
    }
});
</script>

我也试图通过在 link 中传递参数来找到一种方法来更改 bootstrap div 的 class 在页面加载时，但我来了空了。我已经必须通过锚点，但找不到任何有关如何同时通过新的 class.

的信息

Answer 1

您可以直接使用 CSS，使用 :target 来做到这一点。它看起来像：

HTML

<div id="video-series">
  Content Here
</div>

CSS

:target {
  // styles for the target
}

然后在link中，在最后添加#video-series。

使用 Link 在页面加载时展开某些 Div

Expand Certain Div on Page Load with Link

html

jquery

expand

twitter-bootstrap-3