Question

我有一个隐藏/显示子元素的菜单mouseenter＆amp; mouseleave，但页面加载时会显示子元素。

我喜欢它，因此当页面加载时，元素不会显示，但仅在mouseenter＆amp; 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();显然会隐藏整个导航项。我是否使用了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();

Answer 2

通过CSS，如果您的子元素列表具有类，例如.sub-menu

然后只需添加css

.sub-menu { display: none; }

加载时隐藏元素，使用鼠标中心悬停时显示

2 个答案: