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用于我的移动菜单。

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

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

你可以做一个小小的javascript，首先你不能把一个div或span放在ul里面，如果它们不在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

将JQuery UI Accordion用于移动菜单

1 个答案: