javascript - 隐藏一个在某个移动分辨率上

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 only screen and (max-width: 599px) { 
    .txt-menu {
       display:none; 
    }

还; 看看响应式设计。

Answer 2

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

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

Answer 3

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

例子：

1. 推特引导
2. 甘比
3. 响应式网格系统

如果您仍然想采取不同的路线并承担更多工作，您可以使用以下方法检测移动设备，然后进行相应的操作。

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;}
}