Bindirmelerim, başka bir bağlantı tıklandığında kapanabilmesi için nasıl değiştirebilirim?

Question

Tek bir sayfa web sitesi için bir bindirme efekti var. İki bindirme için iki bağlantım var. İkinci bağlantıyı tıkladıktan sonra, ilk yer paylaşımı kapanmıyor ve iki yer paylaşımı gösteriliyor. İlk bindirmeyi nasıl yakın yapabilirim?

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'i değil JQuery kullanın lütfen Eğer.

Answer 1

Yani: Bütün bu kodun

Answer 2

Hidding tüm bindirmeleri peşin işi yapmalıdır:

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

Tüm overlay

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

kapatan bir işlev oluşturmak ve bir açmadan önce aramak isteyebilirsiniz:

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

Ve jQuery'yi kullanıyorum çünkü zaten bunu kendi kendinize kullanıyor görünüyorsunuz. JavaScript çözümü

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 4

İlk Buna

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

DÜZENLEME gibi javascript kodu güncellemeniz gerekecektir anyting

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

anlamına gelmez istediğin gibi, sade javascriptte, aşağıdakileri yapabilirsin. Satır içi yorumlar olarak her bir kod satırını tanımladım.

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>

yanı yakın bindirme için aynı yukarıdaki kodu izleyin ve yapmak. Yardıma ihtiyacın olursa bana haber ver.

jQuery sürümü: yardımcı--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"); 
}); 

Umut.

Answer 5

Dene:

CSS kuralı:

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

JavaScript Çözüm: yakın tüm bindirmeleri açık eklemek sonra (açık sınıf kaldırmak) ve bir bindirme değiştirir her tıklamada

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