4

我正在尝试创建一个针对移动设备进行优化的导航。

 <nav id="nav-content" class="nav-main">       
                <ul>
                    <li>
                        <a href="">about</a>
                    </li>
                    <li>
                        <a class="parent-link">production</a>
                        <ul class="sub-menu">
                            <li><a href="">workshops</a></li>
                            <li><a href="">shows</a></li>
                            <li><a href="">greenlite</a></li>
                        </ul>
                    </li>
                    <li><a href="">watch</a></li>
                    <li><a id="link-logo" href="index.html"><div id="logo"></div></a></li>
                    <li>
                        <a class="parent-link">members</a>
                        <ul class="sub-menu">
                            <li><a href="">current</a></li>
                            <li><a href="">prospective</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="parent-link">postings</a>
                        <ul class="sub-menu">
                            <li><a href="">jobs</a></li>
                             <li><a href="">auditions</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="parent-link">contact</a>
                       <ul class="sub-menu">
                           <li><a href="">team</a></li> 
                           <li><a href="">advertise</a></li>
                           <li><a href="">suggestions</a></li>  
                        </ul>
                    </li>
                </ul>

            </nav>

            <nav id="nav-mobile-header"><a href="index.html"><div id="logo-small"></div></a><div id="nav-trigger">
                ☰
             </div></nav>

当窗口小于 1000 像素时，导航类从 .nav-main 正确更改为 .nav-mobile。

$(document).ready(function()
{

    $(function () {
    $(window).resize(function () { 
        if ($(window).width() <= 1000) 
        {
            $('#nav-content').removeClass('nav-main').addClass('nav-mobile');
        }
        else
            {
                $('#nav-content').removeClass('nav-mobile').addClass('nav-main');
                if ($('#wrap').hasClass('to-left'))
                    {
                        $('#wrap').removeClass('to-left');
                    }
            }

    }).resize(); 
});
});

当导航类为 .nav-main 时，我在悬停时设置了一个向下滑动菜单。但是，当 .nav-mobile 是导航的类时，仍然会触发此查询。为什么会这样？即使更改了类，为什么仍然有链接的事件侦听器？

$(document).ready(function()
{
    var slideTime = 300;
        $('.nav-main li').hover(function () //why does this still work for .nav-mobile?
        {

            $('.sub-menu', this).stop().slideDown(slideTime);
            $('.parent-link', this).css('color', '#555');

        },function () 
        {
            $('.sub-menu', this).stop().slideUp(slideTime);
            $('.parent-link', this).attr('style', '');
        });


});

感谢任何帮助，我对 jQuery 和 SO 还是比较陌生。

4

1 回答 1

3

您仍然$('.nav-main li').hover(function ()执行的原因是因为该事件是如何注册的。基本上是binding an eventvs。delegating an event

绑定事件：

$('.nav-main li').hover(function ()-> 将事件绑定hover到元素。当您绑定一个事件时，它会在内存中注册到该元素。如果元素的属性或属性发生更改，它不会影响事件，因为它绑定到元素，而不是它的属性。因此，即使您更改课程，该事件仍会在内存中。删除它的方法是使用unbindevent ->$('.nav-main li').unbind('hover');

委托事件：

事件委托是指使用事件传播（冒泡）来处理 DOM 中比事件起源的元素更高级别的事件的过程。它允许我们为现在或将来存在或不存在的元素附加/分离单个事件侦听器。

来源：https ://learn.jquery.com/events/event-delegation/

$(document).on('mouseover','.nav-main li',function () ->

将 mouseover-mouseleave 事件委托给文档内的元素。

当您将事件委托给文档时，内存会跟踪文档 (DOM) 中的元素。对属性或属性（如元素的类）的任何更改都会将其从内存中删除，并且不再适用于该元素。

这里有 2 个例子展示了理论的作用：

绑定：http: //jsfiddle.net/DinoMyte/p8ARq/619/

委托：http: //jsfiddle.net/DinoMyte/p8ARq/620/

所以，你应该替换你的hover bindingto mouseenter-mouseleave delegation。

于 2016-01-12T00:31:39.873 回答