Javascript jQuery toggleClass意外行为[更新]

对于一个新的Web设计，我有两个50%宽度的滑块div作为菜单，我想用jQuery添加/删除/切换“open”类。单击其中一个.menul时，#左键应已添加class.open，除非#右键：悬停，反之亦然。你第一次点击它就可以了，但是第二次点击的时候出现了一些问题，但是我似乎不知道它是什么

这是我的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>

这是小提琴：更新了

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

任何帮助都将不胜感激

[更新]

---

我更新了jQuery和fiddle，没有任何结果。非常感谢到目前为止的所有评论，但我的案子仍然没有解决！某些解决方案已关闭，但在未悬停在.slide上时丢失了.open。有人知道如何解决这个问题吗？

尽量减少查询DOM的次数，理想情况下，可以对DOM进行更多的重构，以利用jQuery选择器的变量。这将有助于保持事情的条理性和效率。我不确定我的逻辑是否完全符合你的需要，但起点更好

---

尽量减少查询DOM的次数，理想情况下，可以对DOM进行更多的重构，以利用带有jQuery选择器的变量。这将有助于保持事情的条理性和效率。我不确定我的逻辑是否完全符合你的需要，但起点更好

---

您的问题是将多个单击事件绑定到每个元素。执行此操作时，这些单击事件的触发顺序永远无法保证。正如大家所建议的，在您的场景中尝试使用

.toggleClass（）

方法

此外，如果需要在单击事件中调用多个方法，只需执行以下操作：

function1() { // stuff }
function2() { // stuff }

$('.elem').click(function() {
    function1();
    function2();
});

将多个单击事件绑定到同一个元素不是一个好主意，因为浏览器行为可能会大不相同

现在，让我们看看下面提供的代码块：

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

---

这样做的一个大问题是，在触发

.menul

上的click事件之前，悬停事件实际上没有绑定到元素。此外，如果多次单击

.menul

元素，则悬停事件将被绑定多次。相反，您应该只绑定一次事件，或者如果您选择这样做，请确保在重新绑定事件之前，在适当的时候解除绑定事件。

您的问题是，您要将多个单击事件绑定到每个元素。执行此操作时，这些单击事件的触发顺序永远无法保证。正如大家所建议的，在您的场景中尝试使用

.toggleClass（）

方法

此外，如果需要在单击事件中调用多个方法，只需执行以下操作：

function1() { // stuff }
function2() { // stuff }

$('.elem').click(function() {
    function1();
    function2();
});

将多个单击事件绑定到同一个元素不是一个好主意，因为浏览器行为可能会大不相同

现在，让我们看看下面提供的代码块：

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

---

这样做的一个大问题是，在触发

.menul

上的click事件之前，悬停事件实际上没有绑定到元素。此外，如果多次单击

.menul

元素，则悬停事件将被绑定多次。相反，您应该只绑定一次事件，或者如果您选择这样做，请确保在重新绑定事件之前在适当的时候解除绑定。

尝试此代码。删除了不必要的递归代码

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

$('#right').mouseover(function(){
    $('#left').removeClass('open');
});

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

---

检查并尝试此代码。删除了不必要的递归代码

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

$('#right').mouseover(function(){
    $('#left').removeClass('open');
});

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

---

选中

您不应该在另一个处理程序中添加事件处理程序。无论何时触发后一个事件，都会继续为前一个事件添加多个处理程序，这将导致意外的结果

理想情况下，您的代码应该是

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

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

$('#left').hover(function () {
  $('#right').removeClass('open');
  $(this).addClass('open');
},
function () {
  $(this).removeClass('open')
});

$('.#right').hover(function () {
  $('#left').removeClass('open');
  $(this).addClass('open');
},
function () {
  $(this).removeClass('open')
});

---

如果有帮助，请告诉我。

您不应该在另一个处理程序中添加事件处理程序。无论何时触发后一个事件，都会继续为前一个事件添加多个处理程序，这将导致意外的结果

理想情况下，您的代码应该是

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

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

$('#left').hover(function () {
  $('#right').removeClass('open');
  $(this).addClass('open');
},
function () {
  $(this).removeClass('open')
});

$('.#right').hover(function () {
  $('#left').removeClass('open');
  $(this).addClass('open');
},
function () {
  $(this).removeClass('open')
});

如果有帮助，请告诉我。

这个应该可以用

$('.menul').click(function(){
    $('#left:hidden').addClass('open');
    $('#right:visible').removeClass('open');
});
$('#right').hover(function() {
    $('#left:visible').removeClass('open');                     
}) ...

你也必须为右街区做同样的事

这个应该有用

$('.menul').click(function(){
    $('#left:hidden').addClass('open');
    $('#right:visible').removeClass('open');
});
$('#right').hover(function() {
    $('#left:visible').removeClass('open');                     
}) ...

你也必须为右街区做同样的事

我现在将我的答案从添加到此线程 也要确保它不会像我想的那样丢失 这道题可能会作为这道题的重复题结束

---

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

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

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

---

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

---

我现在将我的答案从添加到此线程 也要确保它不会像我想的那样丢失 这道题可能会作为这道题的重复题结束

---

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

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

.open

类

此外，您还需要继续解除

悬停

事件的绑定，否则您将