javascript - 单击汉堡包图标后，菜单不会显示在主页上的幻灯片图像上方

Question

我不知道如何在单击汉堡包图标后在幻灯片图像上方显示菜单。我使用 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>

样式.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 */

index.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">&#9776;</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>

Answer 1

很高兴知道，z-index 指定兄弟元素的堆栈顺序。在你的情况下<div class="header">需要 z-index 大于 <section id="slideshow"> 。 z-index 仅适用于定位元素，因此它们都应该具有 position:relative 。我在jsFiddle上为您做了一个工作示例。