我正在尝试为我正在创建的网站创建单独的移动导航。这是现在的基本 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');
});
现在我正在尝试创建一些内容,如果选择了列表项,则下拉列表将显示如下图所示。
first list --> second list with selected item
有人知道我如何实现这一目标吗?
最佳答案
首先,您应该更改箭头的方向和位置。或者创建其中两个,一个在左边,一个在右边,然后当用户单击 li 切换类或该 li 元素的其他内容时(如果您希望其他元素折叠,您应该删除单击的类)。然后在CSS中
li > ul{
display:none;
}
li .left-arrow{
display:none;
}
li.clicked > .left-arrow{
display:inline;
}
li.clicked > ul{
display: block;
}
应该可以解决问题
关于javascript - 带滑动下拉菜单的移动导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42763229/