Question

我正在尝试隐藏jQuery“hamburger”菜单中的列表项。在我添加菜单之前，一个简单的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;

在汉堡菜单中隐藏列表项

1 个答案: