0

このテーマに関する投稿がたくさんあることは知っていますが、HTMLマークアップのためにカスタムアコーディオンを作成しました。以下は私のJQueryです。

$(function(){
  hide(0);
  $('.accordion > h1').click(function(){
    hide($('.accordion').index($(this).parent()));
  });
  function hide(i){
    $('.accordion').removeClass('active');
    $('.accordion:eq(' + i + ')').addClass('active');
  }
});

これがアコーディオンの私のHTMLです。私はExpressionEngineCMSを使用していることに注意してください。

<section class="module flag-{style} {page_module_style}">
  <h1 id="row-id{row_id}">{header}</h1>
  <div class="copy">
    {copy}
  </div>
</section>

私はCSSを使用してアコーディオンの外観を与えています。リンクはhttp://siteurl.com/page#row-id1234になります。特定のアコーディオンタブを、そのタブが開いてフォーカスするIDでリンクすると、どこにリンクするかを理解する必要があります。

4

1 に答える 1

0

ウィンドウの準備ができたら、現在のハッシュを取得し、そのIDに一致する要素を見つけます。

function getHash() {
  var hash = window.location.hash;
  return hash.substring(1); // remove #
}

$(function(){
  activeTab = $(getHash()).parent()

  hide($('.accordion').index(activeTab));
});
于 2013-01-29T19:52:38.463 に答える