css - 在手机上隐藏 ul li

Question

我正在使用 Bootstrap 框架开发电子商务网站的前端。为了创建最佳的移动体验，我想隐藏移动设备上主要导航的子元素，而是让用户单击主要元素，然后更快地转到产品页面，他们可以在那里开始浏览元素。

有没有办法做到这一点？

这是导航代码的片段，整个导航很长，基本上我想在移动设备上隐藏所有 level-2 li。

<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav nav-justified horizontal-drop-down">
<li class="level-1">
<a href="#">All Products</a>
<ul>
<li class="level-2">
<a href="#">Accessories</a>
</li>
</ul>
</li>
</nav>

Answer 1

使用媒体查询？

@media (max-width: 767px) {
     .level-2 {
         display: none;
    }
}

这会将类 level-2 设置为在 767px 宽以下的任何内容上都不显示...显然，您可以更改宽度以适合您的应用程序 =)