通过URL哈希链接触发打开Zurb Foundation手风琴

问题描述

我真的很想能够通过URL在问题哈希中的手风琴面板激活 /打开 Zurb Foundation手风琴。

I'd really like to be able to "activate" / "open" a Zurb Foundation Accordion via the URL with the accordion pane in questions hash.

所以例如example.com/page#accordion1

So like example.com/page#accordion1

Foundation是否已经可以实现这一目标，还是易于实现？老实说，我一点都不知道：-/

Is this possible already with Foundation or is it easy to implement? I honestly haven't got a clue :-/

在此先感谢您提供的任何帮助！

Thanks in advance for any help given!

推荐答案

您可以通过向每个手风琴标题添加一个唯一属性来实现此目的< div class = title data-ref = panel-1> 在这种情况下，我添加了 data-ref 属性。然后，您需要添加一些jQuery来查看哈希，如果它是手风琴面板，则单击该面板。

You can do this by adding an unique attribute to each accordion title <div class="title" data-ref="panel-1"> In this case I added a data-ref attribute. Then you will need to add some jQuery to look at the hash and if it is a accordion panel, then click that panel.

<ul class="accordion">
  <li class="active">
    <div class="title" data-ref="panel-1">
      <h5>Accordion Panel 1</h5>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
  <li>
    <div class="title" data-ref="panel-2">
      <h5>Accordion Panel 2</h5>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
  <li>
    <div class="title" data-ref="panel-3">
      <h5>Accordion Panel 3</h5>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
</ul>​

jQuery

jQuery

jQuery(function() { // Document ready shorthand
    // Get the hash and remove the #
    var hash = window.location.hash.replace('#', '');

    if (hash != '') {
        // Cache targeted panel
        $target = $('.title[data-ref="' + hash + '"]');

        // Make sure panel is not already active
        if (!$target.parents('li').hasClass('active')) {
            // Trigger a click on item to change panel
            $target.trigger('click');
        }
    }
});​

一个注意事项：在jsfiddle中进行编辑时，哈希将不起作用。需要以完整模式查看。

如果要链接这将打开一个面板并更新哈希。您将需要在链接中添加特定的类。在我的示例中，我添加了 panel-btn

If you want to have a link that opens up a panel and updates hash. You will need to add a specific class to the link. In my example I add panel-btn

<a href="#panel-2" class="panel-btn">Goto Panel 2</a>

jQuery

jQuery

$('.panel-btn').click(function(e){
    // Get the links href and remove the #
    target_hash = $(this).attr('href').replace('#','');

    // Click targeted panel
    $('.title[data-ref="' + target_hash + '"]').trigger('click');

    // Update hash, so that if page is refreshed, target panel will open
    window.location.hash = target_hash;

    // Stop all default link functionality
    return false;
});

如果您在单击每个面板时正在寻找更多历史记录。您需要为每个 .title 添加一个click事件，并获取其 data-ref 并将其哈希值更改为，就像这样：

If you are looking for more of a history thing when each panel is clicked. You will need to add a click event to each .title and get its data-ref and change the hash to that, like this:

$('.title').click(function(){
  // Get the data-ref
  hash = $(this).attr('data-ref');

  // Set hash to panels hash
  window.location.hash = hash;
});

这篇关于通过URL哈希链接触发打开Zurb Foundation手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！