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

按照上面的代码对封闭叠加也做同样的操作。如果您需要帮助，请告诉我。

jQuery版本： --Demo--

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

希望有所帮助。

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

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

5 个答案: