Question

所以我已经有了我的叠加菜单，当我在叠加容器的任何地方点击时，我会使用脚本来隐藏它。我的问题是，如果之后我不能取消隐藏，所以一旦第一次点击隐藏它，我就无法再显示它。当我按下菜单时，它什么也没显示。

有什么方法可以解决这个事件吗？

$(function () {
    $(document).on('click', '.box', function () {
        $('.box').fadeOut( function () {
            $(this).hide();
        });

    });
});

这是js小提琴：http://jsfiddle.net/sqfyrkpo/

Answer 1

如果我理解你的问题，你想隐藏并显示菜单。单击菜单输入（您当前使用CSS中的:checked伪类）进行显示，然后在单击出现的覆盖框时隐藏？

如果是这样，为什么不使用JQuery取消选中输入。这样，覆盖层将由复选框和CSS本质控制，使用JQuery来实现。像这样（使用代码的基础）：

$(function () {
    $(document).on('click', '.box', function () {
        $('#toggle-nav').attr('checked', false);
    });
});

以下是向您展示的更新小提琴：

http://jsfiddle.net/lee_gladding/sqfyrkpo/7/

此外：

我认为你可能试图过度复杂化，使用复选框显示使用CSS然后使用JQuery隐藏，这是两种不同的技术 - 彼此分开和不知道。

理想情况下，使用复选框（hack）切换其他CSS的关键是使用复选框切换两种状态而不使用JQuery。

当您使用JQuery以及您希望这种方式工作的方式时，您可能想要通过使用切换来考虑使用JQuery来处理所有这些而不是部分html复选框（hack）部分JQuery在您的包装盒上说明active的课程（显示/隐藏菜单）。这将为您提供更多的标记灵活性以及如何构建菜单。只是一个想法！

类似的东西：

$(function () {
    $('#menuButton').on('click', function () {
        $('.box').toggleClass('active');
    });
    $('.box').on('click', function () {
        $(this).removeClass('active');
    });
});

并更新CSS以使用active类，类似于：

#menu .box.active
{ 
    opacity: 1; 
    z-index: 400;
}

（示例中还有其他CSS更新）

以下是改进的HTML，CSS和JQuery的示例：http://jsfiddle.net/lee_gladding/sqfyrkpo/18/

然而，无论如何，遵循JQuery方法，然后限制您的用户启用JQuery以使用菜单（严格来说不完全可访问）。因此，您可能还想考虑未启用JS的用户如何浏览页面。

用javascript隐藏后取消隐藏叠加菜单

1 个答案: