JQuery在.ide后显示图标

时间：2017-04-10 作者：Josh Rodgers

我正在使用SimpleLightbox插件(https://wordpress.org/plugins/simplelightbox/) 在试验现场：http://joshrodg.com/theiveys/about.

如果单击其中一张图片，SimpleLightbox会在Lightbox中打开一个更大的版本。您会注意到，要关闭灯箱，您需要单击右上角的白色“X”，但它直接位于页面菜单（三行所在的位置）。

因此，我添加了一些代码，可以在Lightbox加载时从页面中删除导航栏，如下所示：

$(document).ready(function(){
    $(".simplelightbox").click(function(){
        $(".burger").hide();
    })
});

这是因为当有人用类“simplelightbox”单击其中一个Lightbox图像时，代码就会执行

我遇到的问题是导航栏重新出现。

我尝试过：

$(document).ready(function(){
    $(".simple-lightbox").click(function(){
        $(".burger").show();
    })
});

但这不起作用-导航栏不会重新出现。那个人使用类。简单lightbox（因为它是lightbox显示时的主要类）-也有sl overlay、sl wrapper、sl image和sl close，但它们都不起作用。

有人有什么想法吗？

谢谢，乔希

3 个回复

最合适的回答,由SO网友:Josh Rodgers 整理而成

(function($) {
    $(document).ready(function () {
        $(\'.simplelightbox\').on(\'click\', function () {
            $(\'.burger\').addClass(\'active\');
        });
        $(\'body\').on(\'click\', \'button.sl-close\', function () {
            $(\'.burger\').removeClass(\'active\');
        });
        $(\'body\').on(\'click\', \'.sl-overlay\', function () {
            $(\'.burger\').removeClass(\'active\');
        });
    });
}(jQuery));

不确定这是否是最佳解决方案，但它确实有效。

这将添加"active" 类到"burger" 元素，因为单击用于simplelightbox 班然后我向该类添加了一些cssdisplay: none

我正在删除active 使用button.sl-close （所以我们针对的是一个特定的按钮）然后.sl-overlay Lightbox窗口本身（因此，当我们单击任何绿色空间时，该类也将被删除）。

SO网友:scott

我假设.simplelightbox 和.simple-lightbox 您的问题中有拼写错误，并且在代码中都是正确的。

我的第一个想法是在插件中找到当点击白色的“X”时触发的函数（关闭灯箱），然后添加您的代码行。如果您不想编辑插件（每次供应商更新插件时都必须进行编辑），我将重点关注白色“X”本身的类。检查你的页面，似乎.sl-close. 你说那没用。

您是否尝试过使用jQuerytoggle() 作用它交替于hide() 和show() 取决于元素的状态。

我建议的最后一件事是，看看你是否可以将灯箱的大小缩小5%左右，使其在第一时间不会与菜单重叠。

SO网友:Johansson

您的实际按钮已隐藏（您提供的链接）。现在你的按钮不可点击，是覆盖层关闭了你的灯箱，而不是关闭按钮。必须为其定义宽度和高度：

.sl-wrapper .sl-close {
    height:30px;
    width:30px
}

.button.sl-close::after {
    top:30px;
    right:30px
}

然后，您可以使用按钮的类在单击时显示导航菜单：

$(document).ready(function(){
    $(".sl-close").click(function(){
        $(".burger").show();
    })
});

这应该可以奏效。

标签： plugins jquery 小码农

相关推荐

删除jQuery后在页脚加载jQuery迁移吗？

我正在以以下方式删除WordPress中的jQuery迁移：add_filter( \'wp_default_scripts\', \'remove_jquery_migrate\' ); function remove_jquery_migrate( &$scripts ){ if(!is_admin()){ $scripts->remove( \'jquery\'); $scripts->add( \