将 JQuery UI 手风琴用于移动菜单

Question

>我正在使用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手风琴用于我的移动菜单。

这是我目前用于导航的结构：

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

菜单正在通过简单的媒体查询激活：

.mobile {
    display: none;
}
@media screen and (max-width: 48em) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
}

有没有更好的方法来做到这一点，这样我就不需要重复我的导航标记？

Answer 1

你可以

做一个 litele javascript 的宽度，首先你不能在 ul 中放置一个div 或 span，如果它们不在 li 中，所以你必须去掉菜单文本的跨度宽度，这里有一个例子......您可以播放宽度动画等

<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