javascript - 加载时隐藏元素，使用 Mouseenter 悬停时显示

Question

我有一个使用 mouseenter 和 mouseleave 隐藏/显示子元素的菜单，但子元素在页面加载时出现。

我希望元素在页面加载时不会出现，而仅在 mouseenter 和 mouseleave 上出现。

我如何使用下面的代码来完成此任务？

        $('.side-nav>li.has-flyout', this).on('mouseenter mouseleave', function(e) {
            if (e.type == 'mouseenter') {
                $('.side-nav').find('.flyout').hide();
                $(this).children('.flyout').show();
            }
            if (e.type == 'mouseleave') {
                var flyout = $(this).children('.flyout'),
                    inputs = flyout.find('input'),
                    hasFocus = function(inputs) {
                        var focus;
                        if (inputs.length > 0) {
                            inputs.each(function() {
                                if ($(this).is(":focus")) {
                                    focus = true;
                                }
                            });
                            return focus;
                        }
                        return false;
                    };
                if (!hasFocus(inputs)) {
                    $(this).children('.flyout').hide();
                }
            }
        });

仅执行 $('.side-nav>li.has-flyout').hide(); 显然会隐藏整个导航项。 FWIW 我正在使用 Foundation 5 的框架。

Answer 1

理想:所有初始样式(例如 display: none)(即 .hide() 的作用)都应该写入样式表中。

/* css */
.side-nav > li.has-flyout .flyout {
  display: none;
}

不太理想:

// JavaScript
$('.side-nav>li.has-flyout').children('.flyout').hide();