打開連接到跳轉鏈接錨的手風琴面板

Question

我正在使用 materializecss collapsible 並嘗試獲取跳轉鏈接以打開手風琴面板並滾動到該鏈接。 我有滾動工作，但我似乎無法只打開帶有鏈接目標 ID 的面板。 現在我只需點擊一下就可以用 css 打開所有的手風琴面板。

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

https://jsfiddle.net/f638pmk1/

我嘗試將活動類添加到 li 標簽和帶有 collapsible-body 類的 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 。 Scrollspy 在 materializecss 中平滑滾動，您將匹配的 ID 和 .scrollspy 類添加到目標 div：

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

3）強制點擊目標元素（可折疊的標題）：

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

根本不需要向可折疊組件添加任何 css。 請注意，我在第一個可折疊對象（在 li 上）添加了一個活動類，只是為了給我們一些空間，以便實際滾動瀏覽。

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