更新

Question

我真的希望能够通过问题哈希中的手风琴窗格通过URL“激活”/“打开”Zurb Foundation Accordion。

所以像example.com/page#accordion1

这是否已经可以与基金会一起使用或者是否易于实施？老实说，我没有得到线索： - /

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

Answer 1

您可以通过为每个手风琴标题<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');
        }
    }
});

View in action

Edit code

一个注意事项：在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;
});

Updated jsfiddle view

Updated jsfiddle code

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

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

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

Answer 2

如果您使用的是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/

Answer 3

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

Answer 4

将变量设置为URL中的哈希值，为内容面板div提供与哈希值相同的id。然后在面板中添加一个.active类，其ID与链接相同。

if(window.location.hash) {
  var hash = window.location.hash; 
  $( hash ).addClass( "active" );
}

通过URL哈希链接触发Zurb Foundation Accordion的开放

4 个答案:

HTML

的jQuery

更新

HTML

的jQuery