javascript - 单击汉堡图标后,菜单不会显示在主页上的幻灯片图像上方
问题描述
单击汉堡图标后,我不知道如何在幻灯片图像上方显示菜单。我使用 z-index 和 .addClass 将 diplay:none 属性添加到#slideshow。这没有用。我不知道接下来我能做什么。
https://jsfiddle.net/ft31scgw/
main.js
<script>
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
function hMenu() {
var menu = document.getElementById("toggle");
if(menu) {
var hide = $("#slideshow").hide();
} else {
var show = $("#slideshow").show();
}
}
</script>
style.css 在此处输入图片描述
@media only screen and (max-width: 736px) {
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
button {
text-transform: uppercase;
font-weight: bold;
}
.logo img {
width: 80%;
max-width: 473px;
height: 50px;
}
label{
display: block;
cursor: pointer;
z-index: 10;
}
.menu {
text-align: center;
width: 100%;
display: none;
background: black;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 1;
}
#toggle:checked + .menu {
display: block;
z-index: 10;
}
#slideshow {
z-index: 0;
}
.disappear {
display:none;
z-index: -2;
}
}/* @media 最小宽度 736px */
索引.html
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" onclick="hMenu()" />
<div class="menu">
<a href="http://joeynamiki.com/" target="_blank">Work</a>
<a href="about.php">About Us</a>
<a href="#">Services</a>
<a href="https://medium.com/@wcgwd1" target="_blank">Blog</a>
<a href="contact.php"><span>Contact Us</span></a>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" alt=""></div>
<div><img src="img/image2.jpg" alt=""></div>
<div><img src="img/image3.jpg" alt=""></div>
</div>
</section>
解决方案
很高兴知道,z-index 指定了兄弟元素的堆栈顺序。在您的情况下<div class="header">
需要 z-index 大于<section id="slideshow">
. z-index 仅适用于定位元素,因此它们都应该具有position:relative
. 我在jsFiddle上为您做了一个工作示例。
推荐阅读
- c++ - 我想知道为什么 std::string::c_str() 返回 const char * type
- odoo - odoo 13/14 缺货调整
- reactjs - 如何在 Reactjs 项目中使用 firebase 为不同类别的产品获取数据以显示在主页中
- tensorflow - 使用 DeepXDE 求解微分方程的精度
- sitecore - Sitecore 隐藏某些项目的工作流命令
- python - 多输出 XGBoost 回归器中的 DMatrix
- html - FCC Personal Portfolio 有两个要求
- angular - 使用 Angular 定期为 http-get 续订订阅
- javascript - html2canvas 只渲染 div 元素的可见部分
- html - 将鼠标悬停在 FadeOut 动画上时会停止并在中途跳过