javascript - jQuery toggleClass 意外行为 [更新]

Question

对于新的网页设计，我有两个 50% 宽度的 slider div 作为菜单，我想使用 jQuery 添加/删除/切换“打开”类。单击其中一个 .menul 时，#left 应该添加类 .open，除非 #right:hover 反之亦然。第一次点击是可以的，但是第二次点击就出问题了，但我似乎无法弄清楚是什么...

这是我的 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/Lmxgah9o/1/ 已更新

非常感谢任何帮助!

[更新]

我更新了我的 jQuery 和 fiddle，但没有任何结果。非常感谢到目前为止的所有评论，但我的案子仍然没有解决!一些解决方案很接近，但在没有悬停在 .slide 上时丢失了 .open。有谁知道如何解决这个问题？

Answer 1

I added my answer from your other question to this thread now as well to ensure it is not getting lost as I think your other question may get closed as a duplicate of this one.

---

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

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

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

请注意，当使用 jQuery off('hover')/unbind('hover') 取消绑定(bind) 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 - 为事件菜单使用单独的指示器

---