帶滑動下拉菜單的移動導航

Question

我正在嘗試為我正在創建的網站創建單獨的移動導航。 這是現在的基本html布局

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

使用簡單的腳本切換菜單

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

現在我正在嘗試創建一些內容，如果選擇列表項，下拉列表將顯示如下圖像。

第一個列表 - > 第二個列表，包含所選項目

誰知道我是如何做到這一點的？

Answer 1

首先，你應該改變箭頭的方向和位置。 或者創建其中兩個，一個在左邊，一個在右邊，然后當用戶點擊li切換類點擊或其他內容到該li元素時（如果你想讓其他人崩潰，你應該刪除點擊的類）。 然后在css

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

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

li.clicked > ul{
 display: block;
}

應該做的伎倆