通过URL哈希链接触发Zurb Foundation Accordion的开放
我真的希望能够通过问题哈希中的手风琴窗格通过URL“激活”/“打开”Zurb Foundation Accordion。
就像example.com/page#accordion1一样
这可能已经与Foundation一起使用，还是很容易实现？ 老实说我没有线索： – /
提前感谢您提供的任何帮助！
您可以通过为每个手风琴标题添加唯一属性来实现此目的
在这种情况下，我添加了一个data-ref属性。 然后你需要添加一些jQuery来查看哈希，如果它是一个手风琴面板，那么点击该面板。
HTML
-
Accordion Panel 1
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.
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.
-
Accordion Panel 2
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.
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.
-
Accordion Panel 3
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.
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.
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编辑时，哈希将不起作用。 需要在完整模式下查看。
UPDATE
如果您想要一个打开面板并更新哈希的链接。 您需要在链接中添加特定的类。 在我的例子中，我添加了panel-btn
HTML
Goto Panel 2
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添加一个click事件并获取其data-ref并将哈希值更改为，如下所示：
$('.title').click(function(){ // Get the data-ref hash = $(this).attr('data-ref'); // Set hash to panels hash window.location.hash = hash; });
如果您使用的是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'); } });
请参阅此处的示例，它将通过检测窗口哈希（由代码中的虚拟哈希模拟）以编程方式在页面加载时打开第二个选项卡：
链接到页面而不设置数据选项卡或任何其他设置的链接。 从基础5.5.1开始，它将在页面加载时使用散列解析uri …这意味着如何设置原始链接无关紧要。
将变量设置为URL中的哈希值，为内容面板div提供与哈希中相同的ID。 然后在面板中添加一个.active类，其ID与链接相同。
if(window.location.hash) { var hash = window.location.hash; $( hash ).addClass( "active" ); }