通过 URL 哈希链接触发打开 Zurb 基金会手风琴 [英] Trigger opening of a Zurb Foundation Accordion via URL hash link

查看：20
本文介绍了通过 URL 哈希链接触发打开 Zurb 基金会手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

比如example.com/page#accordion1

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

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

解决方案

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

HTML

    <li class="active"><div class="title" data-ref="panel-1"><h5>手风琴面板1</h5>

<div class="内容"><p>Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p><p>Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p>

<li><div class="title" data-ref="panel-2"><h5>手风琴面板2</h5>

<div class="内容"><p>Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p><p>Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p>

<li><div class="title" data-ref="panel-3"><h5>手风琴面板3</h5>

<div class="内容"><p>Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p><p>Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p>

</ul>

jQuery

jQuery(function() {//文档就绪速记//获取哈希值并删除#var hash = window.location.hash.replace('#', '');如果(哈希！= ''){//缓存目标面板$target = $('.title[data-ref="' + hash + '"]');//确保面板尚未激活if (!$target.parents('li').hasClass('active')) {//触发单击项目以更改面板$target.trigger('点击');}}});

查看操作

编辑代码

一个注意事项:当在 jsfiddle 中编辑时，散列将不起作用.需要以完整模式查看.

更新

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

HTML

<a href="#panel-2" class="panel-btn">转到面板 2</a>

jQuery

$('.panel-btn').click(function(e){//获取链接href并删除#target_hash = $(this).attr('href').replace('#','');//点击目标面板$('.title[data-ref="' + target_hash + '"]').trigger('click');//更新hash，这样如果页面刷新，目标面板就会打开window.location.hash = target_hash;//停止所有默认链接功能返回假；});

更新了 jsfiddle 视图

更新了 jsfiddle 代码

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

$('.title').click(function(){//获取数据引用hash = $(this).attr('data-ref');//将哈希设置为面板哈希window.location.hash = 哈希；});

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

So like example.com/page#accordion1

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!

解决方案

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.

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

One note: When in jsfiddle edit the hash will not work. Need to view in the full mode.

UPDATE

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

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

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 基金会手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆