3

我真的很希望能够通过带有手风琴窗格的 URL 来“激活”/“打开”Zurb Foundation Accordion。

就像 example.com/page#accordion1

Foundation 已经可以做到这一点还是很容易实现？老实说，我没有任何线索：-/

提前感谢您提供的任何帮助！

4

4 回答 4

5

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

HTML

<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(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

HTML

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

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;
});

更新了 jsfiddle 视图

更新了 jsfiddle 代码

如果您在单击每个面板时正在寻找更多历史记录。您需要为每个事件添加一个点击事件.title并获取它data-ref并将哈希更改为该事件，如下所示：

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

  // Set hash to panels hash
  window.location.hash = hash;
});
于 2013-01-03T18:27:34.050 回答
1

如果您使用的是 Foundation 5：

Foundations Accordion 有一个click.fndtn.accordion您可以使用的自定义事件。它将处理正确的打开/关闭状态：

jQuery(document).ready(function($) {
  var hash = window.location.hash;

  if (hash != '') {
    $('[data-accordion] [href="' + hash + '"]').trigger('click.fndtn.accordion');
  }
});

请参阅此处的示例，它将通过检测窗口哈希（由代码中的虚拟哈希模拟）以编程方式在页面加载时打开第二个选项卡：

http://jsfiddle.net/ynyrrm99/

于 2014-03-12T10:58:46.963 回答
0

链接到页面而不设置指向数据选项卡的链接或任何其他设置。从基础 5.5.1 开始，它将在页面加载时使用哈希值解析 uri……这意味着您如何设置原始链接并不重要。

于 2015-04-03T08:50:11.453 回答
0

为 URL 中的散列设置一个变量，为内容面板 div 提供与散列中相同的 id。然后将一个 .active 类添加到与您的链接具有相同 id 的面板中。

if(window.location.hash) {
  var hash = window.location.hash; 
  $( hash ).addClass( "active" );
}
于 2016-03-09T21:46:30.933 回答