使用JQuery UI手风琴手风琴菜单

Question

我使用JQuery UI Accordion来扩展网站正文内容。

下面是该基本标记：

<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> 

菜单是由一个简单的媒体查询激活是否需要重复我的导航标记？

Answer 1

你可以做一个宽度为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'); 
    }) 

https://codepen.io/marcosefrem/pen/aLqvrw