軌道4：如何使用jQuery和turbolinks

基本上我的問題是 Bootstrap Collapse - open the given id fragment 和 Rails 4: how to use $(document).ready() with turbo-links擴展同一個頁面中打開引導手風琴：軌道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持有「點擊前」值。

來源

2014-01-28 Ben

雖然它不是完美的解決方案，加入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)

來源

2014-05-22 20:04:51 Ben

軌道4：如何使用jQuery和turbolinks

回答

相關問題