Откройте панель аккордеона, подключенную к якорной ссылке - PullRequest
Новая
       11

Откройте панель аккордеона, подключенную к якорной ссылке

0 голосов
/ 26 января 2020

Я использую раскладную материализацию css и пытаюсь получить ссылку перехода, чтобы открыть панель аккордеона и перейти к этой ссылке. У меня работает прокрутка, но я не могу открыть только панель с идентификатором цели ссылки. Прямо сейчас у меня просто щелчок, открывающий все панели аккордеона с css. 

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

https://jsfiddle.net/f638pmk1/

Я попытался добавить активный класс в li тег и тег div с классом collapsible-body, но он все еще не открывает этот раздел. Я думаю, что у меня есть цель в переменной, но не знаю, как ее использовать. Я использую чистый JS способ. Ценю помощь.

1 Ответ

1 голос
/ 25 февраля 2020

Хорошо, это довольно просто, но мне пришлось изменить несколько вещей, а также пересобрать в Codepen (что мне кажется намного проще).

1) Вам нужно добавить идентификатор в сворачиваемый заголовок панель, на которую вы нацеливаетесь, и класс scrollspy: 

<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 - это плавная прокрутка в материализации css, вы добавляете соответствующий идентификатор и класс .scrollspy к целевому div: 

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

3) Нажмите кнопку на целевом элементе (заголовок сворачиваемого элемента): 

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

Нет необходимости добавлять css к складной. Обратите внимание, я добавил класс active к первому разборному (на li), просто чтобы дать нам некоторое пространство, чтобы прокрутить.

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

...