使用JQuery UI手风琴手风琴菜单
问题描述:
我使用JQuery UI Accordion来扩展网站正文内容。使用JQuery UI手风琴手风琴菜单
下面是该基本标记:
<div class="accordion">
<h2>Heading</h2>
<div>Content</div>
<h2>Heading</h2>
<div>Content</div>
<h2>Heading</h2>
<div>Content</div>
<h2>Heading</h2>
<div>Content</div>
</div>
我想用JQuery UI Accordion我的手机菜单了。
这是我目前拥有的资产净值的结构:
.mobile {
display: none;
}
@media screen and (max-width: 48em) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
是否有这样做,所以我不要一个更好的办法:
<!-- Desktop menu -->
<nav class="desktop">
<ul>
<li><a href="page-one">Page One</a></li>
<li><a href="page-two">Page Two</a></li>
<li><a href="page-three">Page Three</a></li>
<li><a href="page-four">Page Four</a></li>
</ul>
</nav>
<!-- Mobile menu -->
<nav class="mobile accordion">
<span>Menu</span>
<ul>
<li><a href="page-one">Page One</a></li>
<li><a href="page-two">Page Two</a></li>
<li><a href="page-three">Page Three</a></li>
<li><a href="page-four">Page Four</a></li>
</ul>
</nav>
菜单是由一个简单的媒体查询激活是否需要重复我的导航标记?
答
你可以做一个宽度为litle的javascript,首先你不能在div里面放一个div或span,如果他们不在里面的话,所以你必须把菜单文本的span宽度去掉,在这里你有一个例子......你可以玩宽度动画等等
<nav>
<span class="show-nav">Menu</span>
<ul class="accordion">
<li><a href="page-one">Page One</a></li>
<li><a href="page-two">Page Two</a></li>
<li><a href="page-three">Page Three</a></li>
<li><a href="page-four">Page Four</a></li>
</ul>
// CSS
.show-nav{
display:none;
}
@media screen and (max-width: 767px) {
.show-nav{
display:block;
}
.accordion{
display:block;
max-height: 0;
overflow:hidden;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.accordion.open{
max-height: 500px;
}
}
//使用Javascript
$('.show-nav').click(function(){
$('.accordion').toggleClass('open');
})
感谢您对标记的支持。有没有一种方法可以利用JQuery UI Accordion而不是您所包含的JS行? – Squideyes
对不起,以前没有回应,我想你想要做的行为,你必须这样做或类似的,如果你不使用一些框架,如已经有这些行为包括在他们的图书馆,并在这里你试图做不同于accordeon的菜单,而不是使用相同的代码,根据Jquery UI需要h3 + div,这里你必须做一个元素列表。 –
不用担心。 JQuery UI Accordion可以使用任何html元素作为标题(在这种情况下,' Menu')。请参阅文档[此处](http://api.jqueryui.com/accordion/#option-header)。 – Squideyes