Question

我试图隐藏桌面上的div。我尝试过媒体查询（Caroline的解决方案就是一个例子：https://ecommerce.shopify.com/c/ecommerce-design/t/display-content-on-mobile-or-desktop-only-211885）

我已经将更大的导航（.menu）隐藏在移动设备上，但我无法弄清楚如何在桌面上隐藏我的mobilenav。如果我在主CSS中将mobilenav的显示设置为“隐藏”并在我的媒体查询中显示为“阻止”，则div保持隐藏状态。我猜我的代码在某个地方有问题。您的任何建议将不胜感激。这是我的小提琴：

https://jsfiddle.net/eamr662L/（网站完整代码）

以下是我认为相关代码的摘录：

    mobilenav {
        display: block;
        width: 100%;
        z-index: 1000;
        background-color: #000000;
        text-align: center;
    }

    mobilenav div {
        width: 100%;
    }

    mobilenav a {
        color: #ffffff;
        text-transform: uppercase;
    }

    mobilenav a:hover {
        color: #ffffff;
        text-decoration: underline;
    }

    mobilenav > nav > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        list-style: none;
        margin: 0;
        padding: 0;

    }

    mobilenav > nav > ul:hover {
        background-color: #000000;    
    }

    mobilenav > nav > ul > li {
        flex: 0 1 auto;
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        transition: all linear 0.1s;    
    }

    mobilenav > nav > ul > li a + div {
        display: none;
        position: absolute;
    }

    mobilenav > nav > ul > li:hover a + div {
        display: block;
        background-color: #000000;
    }

    mobilenav > nav > ul > li a + div > ul {
        list-style-type: none;  
    }

    mobilenav > nav > ul > li a + div > ul > li {
        margin: 0;
        padding: 0;
    }

    mobilenav > nav > ul > li a + div > ul > li > a {
        display: block; 
        padding: .25rem 1.5rem;
        text-decoration: none;
    }

    mobilenav > nav > ul > li > a {
        align-items: flex-start;
        display: flex;
        padding: 1rem 1.5rem;
        text-decoration: none;
    }

<mobilenav>
    <nav role="navigation">
        <ul>
            <li>
                <a href="">
                    <div>Navigation</div>
                </a>
                <div>
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">About Us</a></li>
                        <li ><a href="">Research</a></li>
                        <li><a href="">Services</a></li>
                        <li><a href="">Ask a Librarian</a></li>
                        <li><a href="">Archives &amp; Special Collections</a></li>
                        <li><a href="">Exhibitions</a></li>
                        <li><a href="">Plant Information</a></li>                   
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</mobilenav>

这是网站：

http://nybg.beta.libguides.com/

谢谢！

Answer 1

出于某种原因，您的mobilenav似乎已在桌面上将display设置为block。您可以将display: none;与桌面媒体查询一起使用，如下所示：

@media(min-width: 601px) {
  mobilenav {
    display: none;
  }
}

或者只是将mobilenav设置为桌面上的display: none;，并使用移动媒体查询在移动设备上将display设置为block：

mobilenav{
  display: none;
}

@media(max-width: 600px){
  mobilenav{
    display: block;
  }
}

工作 JSFIDDLE 。

也许您应该为桌面和移动设备使用相同的菜单，并使用媒体查询设置不同的风格。

此外，我建议您将css放在外部文件中，而不是像现在<style></style>之间的网站上那样。

Answer 2

尝试添加媒体查询：

@media (min-width: 1200px) { mobilenav {display:block;} }
@media (min-width: 1199px) { mobilenav {display:none;} }

Media querys example

在桌面上隐藏div

2 个答案: