Javascript jQuery toggleClass冲突

对于一个新的Web设计，我有两个50%宽度的滑块div作为菜单，我想用jQuery添加/删除/切换“open”类。单击其中一个.menul时，#左键应已添加class.open，除非#右键：悬停，反之亦然。第一次单击它时，它工作正常，但第二次单击时，似乎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>

这是小提琴：

---

任何帮助都将不胜感激

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

激活的“标志”用于确保仅在激活菜单上切换

.open

类

此外，您还需要不断解除

悬停

事件的绑定，否则您会不断重新绑定

悬停

，导致元素绑定多个

悬停

事件，然后这些事件将执行并相互矛盾

请注意，当使用jQuery取消绑定

hover

事件时，使用

off（'hover'）/unbind（'hover'）

无效，您必须取消绑定

mouseenter

和

mouseleave

事件，因为在使用

selector.hover（…）

新的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');
        }
    });
});

---

-为活动菜单使用单独的指示器

---

---

无法在chrome中复制，您的建议是什么browser@AshishBalchandani铬36@SamvanDoorn：这就是你所需要的吗？@FrançoisWahl不幸的是，这也没有起作用，因为现在.open for#left保持不变#right:hover…@SamvanDoorn:你能解释一下你到底想发生什么吗。忽略命名标识符和类

#right

，

“open

等。。但如果可能的话，简单地解释一下你预期会发生什么。i、 e:

当我将鼠标悬停在左菜单上时，我希望X发生，直到我单击左菜单，然后我希望Y发生，直到我再次单击它。

-或类似：）-基本上检查预期的业务逻辑/行为。我想这可能会让我更容易理解（对我和其他人来说）如何修复：）@SamvanDoorn:我更新了答案，它现在似乎起作用了…我希望：）-A在你的最后一个问题中也添加了这个答案，因为我认为这个问题是你上一个问题的重复，可能会因此关闭。-以防万一：）

$('.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');
        }
    });
});