如何在响应式设计的媒体查询中显示所有 ul li 列表？

Question

我有这个导航栏示例代码片段。在桌面模式下查看时，它会显示所有列表项。但问题是当我根据媒体查询的宽度最小化浏览器的宽度时，我的导航栏只显示主页列表。

这是我的问题的一个例子：

单击切换按钮之前

点击切换按钮后

这就是我点击切换按钮时的样子，它不会显示所有列表项。有没有办法在移动端查看时显示所有列表项？

代码片段示例

 $(document).ready(function(){
  
  var toggle_primary_button    = $('.nav-toggle-button'),  
  toggle_primary_icon      = $('.nav-toggle-button i');
    
    // Basic functionality for nav-toggle-button
 $(toggle_primary_button).click(function(){
  primary_menu.toggleClass("show1");  
  toggle_primary_icon.toggleClass("fa-times").toggleClass("fa-navicon");
 });
    
    });

#nav-area{background:#5b0651;clear:both;text-align:center;height:68px;position:relative;}
#nav-area p{color:#fff;font:bold 20px/100% open sans;position:absolute;left:10px;top:8px;display:none;}
nav ul {list-style-type: none; margin: 0;padding: 0;overflow: hidden;background-color: #5b0651;height:68px;}
#nav-area {font-size:14px;}
nav li {float: left;}
nav ul li:after{content:url(images/lispacer.png) no-repeat;padding: 25px 5px;}
nav li a {display: inline-block;color: white;text-align:center;transition: all 0.3s linear;-webkit-transition: all 0.3s linear;padding: 25px 22px;text-decoration: none; }
nav li a:hover {background-color: #fff;color: black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- Navigation Div -->
    <div id="nav-area">
     <div class="container">
      <a class="nav-toggle-button">
       <i class="fa fa-navicon fa-2x">
       &nbsp;&nbsp;&nbsp;&nbsp;
       </i>
      </a>
      <nav class="dropdown">

        <ul>
         <li><a href="index.php">HOME</a></li>
         <li><a href="#">ABOUT US</a></li>
         <li><a href="#">SERVICES</a></li>
         <li><a href="#">CAREERS</a></li>
         <li><a href="#">RESOURCES</a></li>
         <li><a href="#">CONTACT US</a></li>
        </ul>
      </nav>
     </div>
    </div>

这里的代码是我的 media.css link in.

媒体Css

@media only screen
and (max-width : 960px) {
    html, body{ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
    img{max-width: 100%; height: auto;}


    #nav-area{padding:10px 10px 4px;height:auto;}
    nav ul li{width:48%;margin:0 0 6px!important;border:1px solid #fff;}
    nav ul li a{}
    nav ul li:after{content:""!important;}
}

@media only screen
and (max-width : 768px) {
    .logo,.contactinfo{float:none;text-align:center;}
}

@media only screen
and (max-width : 600px) {
    .nav-toggle-button, nav li, nav li span{display: block; }
    .fright-img, .fleft-img, .fcenter-img,nav, .maincontents img{display: none; margin:0;}

    #nav-area{min-height:100px;}
    #nav-area p{display:block;}

    nav{margin-top:30px;}
    nav ul li{display:block;width:100%;height:100%;}
    .dropdown ul ul{position:relative;padding:0;}
    .dropdown ul ul ul{left:0;}
    .dropdown ul ul li a{width:100%;}
    .toggle-button { display: block; }
    .dropdown ul li:hover > ul {display: none;}
}

Answer 1

您需要在 CSS 代码中从 nav ul 中删除 height:68px。它的高度固定为 68px，这就是为什么您只看到主页 link 而没有其他 link 的原因。希望对你有帮助。

如何在响应式设计的媒体查询中显示所有 ul li 列表？

How to show all ul li list in media queries for responsive design?

html

css

media

jquery

media-queries