Come posso attivare le mie sovrapposizioni in modo che possa chiudersi quando si fa clic su un altro collegamento?

Question

Ho un effetto di sovrapposizione per un sito Web a pagina singola. Ho due collegamenti per due sovrapposizioni. Dopo aver fatto clic sul secondo collegamento, il primo overlay non si chiude e vengono visualizzati due overlay. Come posso chiudere la sovrapposizione iniziale?

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'); 
    } 
}); 

Se è possibile utilizzare Javascript, non JQuery.

Answer 1

Così , come hai chiesto, in semplice javascript, puoi fare quanto segue. Ho inserito la descrizione di ciascuna riga di codice come commenti in linea.

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>

seguire il codice di cui sopra e fare lo stesso per la chiusura di sovrapposizione pure. Se hai bisogno di aiuto fammi sapere.

versione jQuery:--Demo--

$(".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"); 
}); 

Speranza che aiuta.

Answer 2

Hidding tutto in anticipo le sovrapposizioni dovrebbe fare il lavoro:

$(".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() { 
    if ($('.overlay').hasClass('open')) { 
     $("aside.overlay").removeClass("open"); 
     $(".overlay").addClass('close'); 
     $('.overlay').removeClass('close'); 
    } 
}); 

Answer 3

Si potrebbe desiderare di creare una funzione che chiude tutte le sovrapposizioni

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

e chiamare prima di aprire uno:

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

E sto usando jQuery, dal momento che sembra che tu stia già usando te stesso.

Answer 4

Prima di tutto questo codice non significa anyting

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

È necessario aggiornare il codice in javascript come questo

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"); 
}); 

EDIT: soluzione 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 5

Prova:

regola

CSS:

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

Javascript Soluzione:

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 
*/