Question

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

有没有这样做？

以下是导航代码的片段，整个导航很长，基本上我想在移动设备上隐藏所有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设置为在767px宽度以下的任何内容上显示无...显然，您只需更改宽度以适合您的应用程序=）

Answer 2

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

.level-2 {
display: none;

}

Fiddle here

在移动设备上隐藏ul li

2 个答案: