打开连接到跳转链接锚点的折叠面板

Question

我使用 materializecss 可折叠的，并尝试获取跳转链接以打开手风琴面板并滚动到该链接。我有滚动工作，但我似乎无法只打开带有链接目标 id 的面板。现在我只需单击使用 css 打开所有手风琴面板.

$('.open_accordion[data-accordion]').on('click', function () {  
let target = $(this).attr("href");
$(".collapsible-body").css("display", "block")
})

https://jsfiddle.net/f638pmk1/

我尝试将活动类添加到 li 标签和带有可折叠主体类的div 标签中，但它仍然没有打开该部分。我想我在变量中有目标，但不确定如何使用它。我归结为使用纯JS方式。感谢您的帮助。

Answer 1

好的，这很简单，但我不得不改变一些东西，并在 Codepen 中重建(我发现这更容易(。

1(您需要将ID添加到目标面板的可折叠标题和一类滚动中：

<li class="x-accordion-group">
<div id="lee-open" class="collapsible-header scrollspy" id="linked">Second</div>
<div class="collapsible-body x-accordion-toggle">
...

如果你想正常打开一个可折叠的，你可以点击标题 - 这就是它们的工作方式。

2(初始化滚动间谍。Scrollspy是materializecss中的平滑滚动，您将.scrollspy的匹配ID和类添加到目标div：

$('.scrollspy').scrollSpy();

3( 强制单击目标元素(可折叠元素的标题(：

$(target).trigger('click');

根本不需要向可折叠对象添加任何 css。请注意，我在第一个可折叠对象(在 li 上(中添加了一个活动类，只是为了给我们一些空间，以便实际滚动浏览。

https://codepen.io/doughballs/pen/ZEGLNvL