如何切换我的叠加层,以便在单击其他链接时关闭？

Question

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

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.

Answer 1

因此，正如您所问，在普通的 JavaScript 中，您可以执行以下操作。我已将每行代码的描述作为内联注释放入。

function get(selector) { return document.querySelector(selector); }
function getAll(selector) { return document.querySelectorAll(selector); }

//Loop thru all the links
[].forEach.call(getAll(".link"), function(div) {
    //Add click event to each them
    div.addEventListener("click", function(event) {
        //Cross browser event object
        event = event || window.event;
        //Get the data attribute of the clicked link
        var currentClass = div.getAttribute("data-link") || false;
        //Loop thru all the overlays, remove the open class
        [].forEach.call(getAll(".overlay"), function(ol) {
            ol.className = ol.className.replace(/open/, "").replace(/\s{2,}/, " ");
        });
        //If no data attribute on the link elem, return
        if (!currentClass) return;
        //Get the element with the link data attr class
        var classes = get("." + currentClass).className;
        //And add open class to it
        get("." + currentClass).className = classes + " open";
    });
});

.overlay { display: none; }
.open { display: block; }

<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>Some content ovl about</div>
    <div class="overlay_close"></div>
</aside>
<aside class="overlay overlay-service overlay-contentscale">
    <div>Some content ovl service</div>
    <div class="overlay_close"></div>
</aside>

按照上面的代码并对关闭覆盖层执行相同的操作。如果您需要帮助，请告诉我。

jQuery 版本： --演示--

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

$('.overlay_close').on('click', function() {
    var $overlay = $(this).closest(".overlay");
    $overlay.is(".open") && $overlay.removeClass("open");
});

希望有帮助。