0

В основном мой вопрос является продолжением Bootstrap Collapse - open the given id fragment и Rails 4: how to use $(document).ready() with turbo-links:Rails 4: Как открыть загрузочный аккордеоне в той же самой странице с помощью JQuery и turbolinks

Разница заключается в том, что мне нужно, чтобы открыть аккордеон, который связан с одной точки зрения.

У меня есть страница с большим количеством информации, которая сгруппирована с использованием Bootstrap Accordions. В аккордеоны выглядеть следующим образом:

# view_xyz.html.haml 
.accordion#accId2 
    .accordion-group 

    .accordion-heading#Heading1 
     %a.accordion-toggle{'data-toggle' => 'collapse', 'data-parent' => '#accId2', :href => '#Heading1_'} 
     Heading 1 
    .accordion-body.collapse#Heading1_ 
     .accordion-inner 
     %p 
      Content 1 

    .accordion-heading#Heading2 
     %a.accordion-toggle{'data-toggle' => 'collapse', 'data-parent' => '#accId2', :href => '#Heading2_'} 
     Heading 2 
    .accordion-body.collapse#Heading2_ 
     .accordion-inner 
     %p 
      Content 2 

    ... 

    .accordion-heading#HeadingN 
     %a.accordion-toggle{'data-toggle' => 'collapse', 'data-parent' => '#accId2', :href => '#HeadingN_'} 
     Heading N 
    .accordion-body.collapse#HeadingN_ 
     .accordion-inner 
     %p 
      Content N 
     = link_to('Heading 1', view_xyz_path(anchor: :Heading1)) 

Теперь я хочу, чтобы браузер прокручивается аккордеона с # Заголовок1 и открывает # Heading1_, связываясь с ним, как показано на аккордеоне #HeadingN.

В принципе, я достиг, что с помощью следующего сценария, как предложено в Bootstrap Collapse - open the given id fragment и Rails 4: how to use $(document).ready() with turbo-links соответственно.

# accordion.js.coffee 
collapse = -> 
    if (window.location.hash != null) 
    $(window.location.hash + '_.collapse').collapse('show') 

$(document).ready(collapse) 
$(document).on('page:load', collapse) 

Хотя это работает как шарм при ссылке на аккордеоне с любой другой точки зрения она не работает внутри view_xyz, потому что «страница: OnLoad» событие не уволят.

Есть ли какой-либо (элегантный) способ сделать эту работу с помощью turbolinks и jquery?

P.S .: Я также попытался подключиться к другим событиям документа - особенно «странице: нажмите». Однако проблема с «page: click» заключается в том, что при клике время якорь еще не является частью ссылочного элемента, так что .collapse ('show') не имеет ничего общего с тем, что window.location.hash поддерживает значение «до щелчка».

ответ

0

Хотя это не идеальное решение, добавив hashchange событие сделал трюк для меня:

# accordion.js.coffee 
collapse = -> 

    if (window.location.hash != null) 
    #alert('show "' + window.location.hash + '"') 
    $(window.location.hash + '_.collapse').collapse('show') 

$(document).on('ready page:load', collapse) 
$(window).on('hashchange', collapse) 
Смежные вопросы