【发布时间】：2018-05-30 10:47:47
【问题描述】：
我正在使用带有一点 jquery 的简单响应式下拉菜单。代码本身可以正常工作。但是当我将它添加到页面内容时，它会在移动视图中下推主要内容。在桌面视图中，下拉菜单应“覆盖”主要内容。 我试图给 ul li 一个位置：相对；正如我在一些建议中读到的，但这也不起作用。问题可能是jquery代码吗？ 我也在使用一些 flexbox 设计，但我不认为这是问题所在？
HTML 结构：
<body>
<div class="wrapper">
<header class="full-width flex-container">
<div class="logo-wrap">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="nav-wrap">
<nav>
<div>
<i class="fa fa-bars"></i>
</div>
<ul>
<li><a href="#"><b>Item1</b></a></li>
<li><a href="#"><b>Item2</b></a></li>
<li><a href="#"><b>Item3</b></a>
<ul>
<li><a href="#">Sub-Item1</a></li>
<li><a href="#">Sub-Item2</a></li>
<li><a href="#" class="active">Sub-Item3</a></li>
<li><a href="#">Sub-Item4</a></li>
<li><a href="#">Sub-Item5</a></li>
</ul>
</li>
<li><a href="#"><b>Item4</b></a></li>
<li><a href="#"><b>Item5</b></a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="wrap">
<article>
<h1>Bilanz</h1>
<hr id="top-hr">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...............</p>
</article>
</div>
</main>
</div>
CSS：
* {
margin: 0;
padding: 0;
}
html,
body {
overflow-x: hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #e6e6e6;
}
.wrapper {
max-width: 90%;
margin: 0 auto;
border: 1px solid red;
}
.full-width {
position: relative;
/* child absolute */
margin: 0 -9999rem;
/* add back section padding value */
padding: .25rem 9999rem;
}
.flex-container {
display: flex;
justify-content: space-between;
}
.nav-wrap {
align-self: flex-end;
}
.main-wrap {
display: flex;
}
header {
background-color: #ffffff;
}
#logo {
max-width: 100%;
}
main {
background-color: #ffffff;
}
article {
margin-top: 3em;
padding: 2em;
}
aside {
border: 1px solid grey;
padding: 2em;
margin-bottom: 3em;
}
h1 {
color: #97C227;
}
h1,
h2,
p {
padding: 0.8em 0;
}
#top-hr {
height: 4px;
color: #d9d9d9;
background: #d9d9d9;
border-style: none;
}
/*###############-------navigation-------############*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
background: white;
}
ul li {
display: inline-block;
position: relative;
}
ul li a {
display: block;
color: grey;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
}
ul li a:hover {
color: #97C227;
}
ul li a.active {
color: #97C227;
text-decoration: underline;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background-color: lightblue;
}
ul li:hover ul {
display: block;
}
nav div {
background-color: pink;
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
/*########### media queries ##############*/
@media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background: #e3e3e3;
}
ul li {
display: block;
}
ul ul {
position: static;
background: #e3e3e3;
}
}
jquery：
<script type="text/javascript">
$("nav div").click(function() {
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function() {
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function() {
if ($(window).width() > 768) {
$("ul").removeAttr('style')
}
})
</script>
【问题讨论】：
-
能否请您使您的代码更短且中肯。好像您已经上传了所有代码。
-
当您将
position设为relative时会发生什么？有两种方法可以找到，一种是你告诉我，另一种是我自己执行了代码，但是你的代码很长，没有重点，所以请附上小提琴或任何我可以监控的平台和检查您的结果和结果。 -
@Code_Ninja 对代码量感到抱歉，因为我是一个非常初学者，我认为看到整个事情会有所帮助。我会尝试你的建议
-
没关系@lalofee，只需再次编辑问题并直截了当。
-
jsfiddle.net/lalofee/09g9pa6e 把它放在小提琴上，
标签： jquery css mobile dropdown responsive