隐藏汉堡菜单中的列表项

Question

我试图隐藏jQuery"汉堡包"菜单中的列表项。在添加菜单之前，一个简单的display: none从其他媒体查询中隐藏了该项目。但是当我添加汉堡菜单时，它又出现了。

菜单有一个单独的.css文件，所以也许也必须把它放在里面，但没有任何效果。这里是 HTML。这是我试图隐藏的底层。

<nav class="style-nav">
    <ul id="menu">
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('soc_Instagram','','Images/soc_Instagram_rollover.png',1)"><img id="soc_Instagram" src="Images/soc_Instagram.png" alt="This links to my Instagram page"></a></li>
    </ul>
</nav>

列表项 ID soc_Instagram，并在 css 中显示为

#soc_Instagram {
    display: none;

Answer 1

您为 #soc_Instagram 提供的 css 仅应用于图像。您可以尝试为最后一个列表项添加 css 规则。

像向其添加类一样简单

                <nav class="style-nav">
                <ul id="menu">
                    <li><a></a></li>
                    <li><a></a></li>
                    <li><a></a></li>
                    <li><a></a></li>
                    <li class='Hidden'><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('soc_Instagram','','Images/soc_Instagram_rollover.png',1)"><img id="soc_Instagram" src="Images/soc_Instagram.png" alt="This links to my Instagram page"></a>Hide this one</li>
                </ul>
                </nav> 

然后 css 将只应用于新类

.Hidden {
    display: none;