如何关闭 Foundation zurb 选项卡中打开的内容面板
how to close an open content panel in foundation zurb tab
这是我的带标签的 zurb 基础代码:
http : // codepen.io/vomaringo/pen/RPRdRr
我想通过再次单击选项卡来关闭面板选项卡。
可以在 zurb foundation 中使用一个选项来完成吗,或者你能帮我 jquery 吗?
感谢阅读我的 post.
此致
杰克
在此处查看代码
HTML
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#panel1a">Accordion 1</a>
<a href="#panel2a">Accordion 2</a>
<div id="panel1a" class="content active">
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.
</div>
<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>
</ul>
CSS
.accordion-navigation > a{width:200px;float:left;}
.content{display:block;float:none;width:100%;clear:both}
jQuery
$(document).foundation();
$( ".tabs" ).click(function() {
if ( $( '.content' ).hasClass('active')) {
$('content').hide();
}
});
这是我的带标签的 zurb 基础代码:
http : // codepen.io/vomaringo/pen/RPRdRr
我想通过再次单击选项卡来关闭面板选项卡。
可以在 zurb foundation 中使用一个选项来完成吗,或者你能帮我 jquery 吗?
感谢阅读我的 post.
此致
杰克
在此处查看代码
HTML
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#panel1a">Accordion 1</a>
<a href="#panel2a">Accordion 2</a>
<div id="panel1a" class="content active">
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.
</div>
<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>
</ul>
CSS
.accordion-navigation > a{width:200px;float:left;}
.content{display:block;float:none;width:100%;clear:both}
jQuery
$(document).foundation();
$( ".tabs" ).click(function() {
if ( $( '.content' ).hasClass('active')) {
$('content').hide();
}
});