用于显示/隐藏叠加的简单触发器元素(最佳实践)

Simple trigger element for show/hide overlay (best practice)

本文关键字：元素 最佳 触发器 简单 显示 隐藏 叠加 用于      更新时间：2023-09-26

我很困惑。我有一个简单的触发器元素，它显示/隐藏一个元素，但我似乎永远无法让它只使用一个元素。我想这可能是我构建JS的方式，但我不明白为什么它不起作用。下面是一些做同样事情的变体，但它们似乎都不起作用。

帮忙吗?谢谢。

function overlays() {
    $('.header-container .info-trigger').on('click touchstart', function(e) {
        $(this).addClass('active');
        $('body').addClass('overlay-open');
        $('.info-overlay').fadeIn('fast');
        e.preventDefault();
    });
    $('.header-container .info-trigger.active').on('click touchstart', function(e) {
        $('.info-overlay').fadeOut('fast', function() {
            $('.info-overlay').removeAttr('style');
        });
        $('body').removeClass('overlay-open');
        e.preventDefault();
    });
}
overlays();

function overlays() {
    if ($('body').is('.overlay-open')) {
        $('.header-container .info-trigger').on('click touchstart', function(e) {
            $('.info-overlay').fadeOut('fast', function() {
               $('.info-overlay').removeAttr('style');
            });
            $('body').removeClass('overlay-open');
            e.preventDefault();
        });
    } else {
        $('.header-container .info-trigger').on('click touchstart', function(e) {
            $('body').addClass('overlay-open');
            $('.info-overlay').fadeIn('fast');
            e.preventDefault();
        });
    }
}
overlays();

function overlays() {
    $('.header-container .info-trigger').on('click touchstart', function(e) {
        $('body').addClass('overlay-open');
        $('.info-overlay').fadeIn('fast');
        e.preventDefault();
    });
    $('body.overlay-open .header-container .info-trigger').on('click touchstart', function(e) {
        $('.info-overlay').fadeOut('fast', function() {
            $('.info-overlay').removeAttr('style');
        });
        $('body').removeClass('overlay-open');
        e.preventDefault();
    });
}
overlays();

每次点击请绑定文档

$(document).on('click touchstart','.header-container .info-trigger', function(e) {

如果仍然不工作，则显示错误控制台

$('body').is('overlay-open')

应为

$('body').is('.overlay-open')

您似乎错过了类选择器。到处都是。

在你的它正在检查一个名为overlay-open的元素，我认为这是一个类，你正在应用到身体。

根据条件添加点击事件也是一个坏主意。

更好的方法是分配一个事件处理程序，并在其中使用条件来使其工作。

function overlays() {
    $('.header-container .info-trigger').on('click touchstart', function (e) {
        e.preventDefault();
        var $this = $(this); // cache selector
        // Check for active class and do the action
        if ($this.hasClass('active')) {
            $('.info-overlay').fadeOut('fast', function () {
                $('.info-overlay').removeAttr('style');
            });
            $('body').removeClass('overlay-open');
        } else {
            $this.addClass('active');
            $('body').addClass('overlay-open');
            $('.info-overlay').fadeIn('fast');
        }
    });
}
overlays();
相关文章：