Question

如何在移动设备分辨率中隐藏li？当宽度分辨率< 600（例如:)隐藏class="txt-menu"

项

我的HTML：

<li>
    <a href="#">TITLE MENU</a>
    <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href=""><img src="my-image_instead_of_menu-text"></a></li>
        <li><a href="" class="txt-menu">my text intead of menu image</li><br>
    </ul>
</li>

谢谢！

Answer 1

使用media queries可以解决您的问题。
对于移动分辨率，您可以使用以下代码：

@media only screen and (max-width: 599px) { 
    .txt-menu {
       display:none; 
    }

也;看看responsive design.

Answer 2

您自己不需要JavaScript。您可以将样式限制为仅适用于某些环境属性;

@media only screen and (max-device-width: 700px)
    li.text-menu {
        display: none;
    }
}

Answer 3

您可以使用jquery的hide()方法隐藏任何HTML元素。但据我所知，如果一个人从手机访问一个页面，你基本上想要更改菜单类型。如果是这种情况而不是手动更改内容，您应该考虑查看一些响应式CSS框架。

示例：

Twitter Bootstrap
Gumby
Responsive Grid System

如果你仍然想采取不同的路线并且更多的工作，你可以使用以下方法来检测移动设备，然后相应地做一些事情。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    /* Hide LI's here */
}

这是JSFiddle

Answer 4

您应该只使用css检查移动设备分辨率并隐藏<a>：

@media (max-width: 767px) {
   li a.txt-menu{display:none;}
}

隐藏某个移动分辨率的<li> </li>

4 个答案: