在桌面上隐藏div

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

我已经得到了我的大导航（.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/

谢谢！

来源

2016-12-24 Edgar

你应该表现出 – doz87

出于某种原因，似乎你的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>之间。

来源

2016-12-24 21:29:17 Ionut

谢谢你这么多你的媒体查询！如果我想在桌面版本的菜单上应用JavaScript，但不是在移动版本上，我是否仍然使用相同的HTML？我最初将它作为一个菜单，但我还不知道很多JavaScript，这对我来说是一个挑战。 – Edgar

我将把我的CSS放在一个单独的文件中 - 谢谢！ – Edgar

@EstherMarie，它通常应该是相同的HTML代码，这实际上取决于你想要做什么。在这种情况下你不需要JavaScript。您可以使用媒体查询，您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries阅读更多关于它们的信息，还可以在Google上找到更多信息。另外，如果你认为我的答案对你有帮助，请不要忘记接受它。谢谢。 – Ionut

尝试添加媒体querys：

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

Media querys example

来源

2016-12-25 04:40:15

在桌面上隐藏div

回答

相关问题