我有这个导航栏示例代码片段。在桌面模式下查看时,它会显示所有列表项。但问题是,当我根据媒体查询的宽度最小化浏览器的宽度时,我的导航栏只显示主页列表。
这是我的问题的一个例子:
在点击切换按钮之前
点击切换按钮后
这就是我单击切换按钮时的样子,它不会显示所有列表项。有没有办法在移动端查看时显示所有列表项?
代码片段示例
$(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">
</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 链接。
媒体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;}
}
最佳答案
您需要从 CSS 代码中的 nav ul
中删除 height:68px
。它的高度固定为 68px,这就是为什么您只看到主页链接而没有其他链接的原因。希望对您有所帮助。
关于jquery - 如何在响应式设计的媒体查询中显示所有 ul li 列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42944355/