スライド式のドロップダウンメニュー付きモバイルナビゲーション

Question

私が作成しているウェブサイト用の別個のモバイルナビゲーションを作成しようとしています。これは、今私は、リスト項目を選択した場合、ドロップダウンが表示されているものを作成しようとしているメニューに

$('.fa-bars').click(function(evt) { 
    $('.nav-mobile').slideToggle('down'); 
}); 

を切り替えるには、今、簡単なスクリプトを使用して

<nav class="mobile-navigation"> 
    <ul class="header-mobile"> 
     <li> 
      <i class="fa fa-bars" aria-hidden="true"></i> 
     </li> 
     <li> 
      <a href="{$WEB_ROOT}/index.php"><img src="{$WEB_ROOT}/templates/{$template}/img/logo/logo.svg" alt="logo"></a> 

     </li> 
     <li> 
      <ul> 
       <li><a href="{$WEB_ROOT}/cart.php?a=view"><span class="icon icon-nav-account"></span></a></li> 
       <li> 
        <a href="{$WEB_ROOT}/cart.php?a=view"> 
         <span class="icon icon-cart"></span> 
         <span class="notification-amount">{$cartitemcount}</span> 
        </a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</nav> 
<div class="row"> 
    <ul class="nav-mobile"> 
     <li><a href="{$WEB_ROOT}/about.php">About us</a></li> 
     <li><a href="{$WEB_ROOT}/servicesc.php">Services</a></li> 
     <li><a href="{$WEB_ROOT}/domains.php">Domains</a></li> 
     <li><a href="{$WEB_ROOT}/support.php">Support</a></li> 
    </ul> 
</div> 

基本的なHTMLレイアウトであります下の画像のように。

first list - > second list with selected item

誰も私はこれを達成する方法のアイデア？

Answer 1

まず、矢印の向きと位置を変更する必要があります。左または右に1つずつ作成し、ユーザーがクリックしたliトグルクラスをクリックするか、そのli要素に何か他のものをクリックします（他のユーザーが崩壊した場合は、クリックされたクラスを削除する必要があります）。そして、CSSに

li > ul{ 
display:none; 
} 
li .left-arrow{ 
    display:none; 
} 

li.clicked > .left-arrow{ 
    display:inline; 
} 

li.clicked > ul{ 
display: block; 
} 

は、トリックにそれは私の問題ではありませんでしたが、私のせいで私はより具体的なされている必要があります