在Zurb Foundation 5手风琴中创建一个面板链接

时间:2015-10-07 13:05:10

标签: css zurb-foundation zurb-foundation-5

我要做的是手风琴,手风琴的顶部面板是另一页的链接,其余的手风琴正常运作。我已经尝试了一些javascript来停止手风琴事件,但这似乎不起作用。有什么指针吗?

1 个答案:

答案 0 :(得分:0)

是的,首先您需要删除内部内容,以便它不会扩展。之后,我会在a标记中添加一个类,并在页面上写一些脚本来识别该类并重定向该URL。如下所示:

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a class="redirect-me" href="http://www.google.com">Accordion 1</a>
  </li>
  <li class="accordion-navigation">
    <a href="#panel2a">Accordion 2</a>
    <div id="panel2a" class="content">
      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.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel3a">Accordion 3</a>
    <div id="panel3a" class="content">
      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.
    </div>
  </li>
</ul>

使用jQuery,脚本看起来像这样:

$(".redirect-me").bind("click",function(){
    theUrl = $(this).attr("href");
    window.location = theUrl;
});

有点脏的方法。但它是一个绑手,直到你能按照其他人的推荐方式做出决定。