モバイルメニューの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を使用したい：ここ

は、そのための基本的なマークアップです。ここで

は、私は現在、ナビゲーションのために持っている構造です：

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

は、Iドンので、これを行うための良い方法はあります私のnavマークアップを繰り返す必要はありませんか？

Answer 1

あなたはそれを幅広いリラブルなjavascriptにすることができます。最初はdivにするか、ulの中にスパンを入れることはできませんので、スパムの幅をメニューテキストから取り除く必要があります。例では、...あなたは、幅アニメーションを再生することができますなど

<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