javascript - jQuery切换类冲突

Question

对于新的网页设计，我有两个 50% 宽度的 slider div 作为菜单，并且我想使用 jQuery 添加/删除/切换“打开”类。单击其中一个 .menul 时，#left 应该添加类 .open，除非 #right:hover ，反之亦然。第一次单击它时它可以工作，但第二次单击时似乎toggleClass被卡住/未更新...有人知道如何解决这个问题吗？

这是我的 HTML:

<div id='home'>
    <div class='slide' id='left'>
        <div class='wrap'>
            <div class='text'><a class='menul' href='#sounds'>Savado <span>Sounds</span></a><br/>
            <div class='subtext'>
                <a class='menul' href='#artist'>Performing artist</a><br/>
                <a class='menul' href='#composer' id='one'>Media Composer</a><br/>
                <a class='menul' href='#producer' id='two'>Band Producer</a></div>
            </div>
            <div class='inner'></div>
            <a class='full' href='#home'></a>
        </div>
        <div class='logo' id='logol'>
            <a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
        </div>
    </div>
    <div class='slide' id='right'>
        <div class='wrap'>
            <div class='text'><a class='menur' href='#designs'>Savado <span>Designs</span></a><br/>
                <div class='subtext'>
                    <a class='menur' href='#management'>Content Management</a><br/>
                    <a class='menur' href='#portfolio' id='one'>Design Portfolio</a><br/>
                    <a class='menur' href='#engines' id='two'>Search Engines</a></div>
            </div>
            <div class='inner'></div>
            <a class='full' href='#home'></a>
        </div>
        <div class='logo' id='logor'>
            <a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
        </div>
    </div>
</div>

这是我的 jQuery:

$('.menul').click(function(){
    $('#left').addClass('open');
    $('#right').removeClass('open');
    $('#right').hover(function(){$('#left').toggleClass('open')});
});
$('.menur').click(function(){
    $('#right').addClass('open');
    $('#left').removeClass('open');
    $('#left').hover(function(){$('#right').toggleClass('open')});
});

这是 fiddle :http://jsfiddle.net/ytexqtyg/2/

任何帮助将不胜感激!

Answer 1

我又看了一遍，您必须添加另一个类或数据属性来区分事件和关闭菜单和事件和打开菜单，否则这将不起作用。

事件“标志”是为了确保您只在事件菜单上切换 .open 类。

此外，您还需要不断解除 hover 事件的绑定(bind)，否则您会不断重新绑定(bind) hover，导致元素有多个 hover 事件绑定(bind)，然后将全部执行并相互矛盾。

请注意，使用 jQuery 取消绑定(bind) hover 事件时 off('hover')/unbind('hover') 不起作用，您必须取消绑定(bind) mouseenter 和 mouseleave 事件，因为这些事件在使用 selector.hover(...)

时由 jQuery 绑定(bind)

新的JavaScript代码如下:

$('.menul').click(function () {    
    $('#left').addClass('active');
    $('#left').addClass('open');
    $('#right').removeClass('active');

    $('#right').off('mouseenter mouseleave').hover(function(){
        if($('#left').hasClass('active')){
            $('#left').toggleClass('open');
        }
    });
});

$('.menur').click(function () {
    $('#right').addClass('active');
    $('#right').addClass('open');
    $('#left').removeClass('active');

    $('#left').off('mouseenter mouseleave').hover(function(){
        if($('#right').hasClass('active')){
            $('#right').toggleClass('open');
        }
    });
});

<小时/>

DEMO - 对事件菜单使用单独的指示器

<小时/>