如何切換我的疊加層，以便在單擊其他鏈接時關閉？

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

預先隱藏所有疊加層應該完成這項工作：

$(".link").on('click', function(e) {
    e.preventDefault();
    $('.overlay').hide(); // <----- new line
    var currentClass = $(this).data("link");
    $("aside." + currentClass).addClass("open");
});
$('.overlay_close').on('click', function() {
       $('.overlay').removeClass('open');    
});

Answer 2

首先，這段代碼並不意味着任何問題

$(".overlay").addClass('close');
$('.overlay').removeClass('close');

你需要像這樣在javascript中更新代碼

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

})
$('.overlay_close').on('click', function() {
   $("aside." + currentClass).removeClass("open");
});

編輯：Javascript解決方案

var link = document.getElementsByClassName('link')
var overlay_close = document.getElementsByClassName('overlay_close');
var currentClass;
link.onclick = function(e){
  e.preventDefault();
  currentClass = this.getAttribute('data-link');
  this.classList.add("open")
}
overlay_close.onclick = function(e){
  var currentElement = document.querySelector("aside."+currentClass);     
  currentElement.classList.remove("open");
}

Answer 3

您可能想要創建一個關閉所有疊加層的函數

function closeAllOverlays () {
  $('.overlay').removeClass('open');
}

並在打開之前調用它：

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

我正在使用jQuery，因為你似乎已經把它用在了自己身上。

Answer 4

因此，正如您所說，在簡單的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");
});

希望有所幫助。

Answer 5

嘗試：

CSS規則：

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

Javascript解決方案：

function getAllelements(selector) { 
    return document.querySelectorAll(selector); 
}

function addEventHandler(element,eventType,handler) {
 if (element.addEventListener)
     element.addEventListener (eventType,handler,false);
 else if (element.attachEvent)
     element.attachEvent ('on'+eventType,handler); 
}

function clickOnlink(event){
    var curTarget = event.target;
    closeAlloverlay();
    var curOverlayobj = document.querySelector("."+curTarget.dataset.link);
    curOverlayobj.classList.add("active");
}

function closeAlloverlay(){
    var overLayelelist = getAllelements(".overlay");
    for(var i=0; i<overLayelelist.length; i++){
        overLayelelist[i].classList.remove("active");
    }
}

function linkObjinit(linkObj){
        if(linkObj.length > 0){
        for (i = 0; i < linkObj.length; i++) { 
            var curObj = linkObj[i];
            if(curObj.dataset.link){
                addEventHandler(linkObj[i],'click',clickOnlink);
            }
            else{
                addEventHandler(linkObj[i],'click',closeAlloverlay);
            }
        }
    }

}
linkObjinit(getAllelements("#menuheader .link"));

/* 
 * For nth number of Menu 
 * Call "linkObjinit(getAllelements("#NAVTAGID .link"))" function
 */