在手机上隐藏 ul li

Question

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

有没有办法做到这一点？

这里是nav代码的sn-p，整个nav挺长的，基本上我想把所有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;
    }
}

这会将 2 级类设置为在宽度小于 767 像素的任何东西上不显示...显然您可以更改宽度以适合您的应用程序 =)

Answer 2

您可以添加到您的 CSS 页面：

.level-2 {
display: none;

}

Fiddle here