小编red*_*lix的帖子

我对单页网站有叠加效果.我有两个叠加的两个链接.单击第二个链接后,第一个叠加层不会关闭,并显示两个叠加层.如何关闭初始叠加层？

HTML:

<nav id="menuheader">
    <ul style="display:block;">
        <li>
            <div class="about link" data-link="overlay-about"> About </div>
        </li>
        <li>
            <div class="service link" data-link="overlay-service"> Services </div>
        </li>
        <li>
            <div class="contact link"> Contact </div>
        </li>
    </ul>
</nav>
<aside class=" overlay overlay-about overlay-contentscale">
    <div class="overlay_close"></div>
</aside>
<aside class="overlay overlay-service overlay-contentscale ">
    <div class="overlay_close"></div>
</aside>

使用Javascript:

$(".link").on('click', function(e) {
    e.preventDefault();
    var currentClass = $(this).data("link");
    $("aside." + currentClass).addClass("open");

})
$('.overlay_close').on('click', function() {
    if ($('.overlay').hasClass('open')) {
        $("aside.overlay").removeClass("open");
        $(".overlay").addClass('close');
        $('.overlay').removeClass('close');
    }
});

如果你可以请使用Javascript,而不是JQuery.