Question

对于新的网页设计，我有两个50％宽度滑块div作为菜单，我想用jQuery添加/删除/切换'open'类。在点击其中一个.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')});
});

这是小提琴：http://jsfiddle.net/Lmxgah9o/1/ 已更新

非常感谢任何帮助！

[UPDATE]

我更新了我的jQuery并且没有任何结果。非常感谢所有评论到目前为止，但我的案例仍然是解决了！一些解决方案很接近，但是当没有在.slide上盘旋时丢失了.open。有谁知道如何解决这个问题？

Answer 1

尝试不经常查询DOM，理想情况下，可以对jQuery选择器使用变量进行更多重构。这将有助于保持组织有序和高效。我不确定我的逻辑是否完全符合您的要求，但起点更好。

jsFiddle

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

$('#right').on('mouseenter', function () {
    $('#left').toggleClass('open');
});
$('.menur').on('click', function () {
    $('#right').toggleClass('open');
    $('#left').toggleClass('open');
});

$('#left').on('mouseenter', function () {
    $('#right').toggleClass('open');
});

Answer 2

您的问题是您将多个点击事件绑定到每个元素。执行此操作时，触发这些点击事件的顺序为从不保证。正如大家所建议的那样，尝试在您的方案中使用.toggleClass()方法。

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

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

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

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

现在，让我们看一下您提供的以下代码块：

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

这是一个很大的问题，在.menul上的点击事件被触发之前，您的悬停事件实际上并未绑定到该元素。此外，如果多次单击.menul元素，则悬停事件将被多次绑定。相反，您应该只绑定事件一次，或者如果您这样选择，请确保在重新绑定事件之前取消绑定事件。

Answer 3

试试这段代码。删除了不必要的递归代码。

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

检查here on jsfiddle

Answer 4

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

理想情况下，您的代码应该类似于

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

Updated fiddle

如果有帮助，请告诉我。

Answer 5

这个应该有效

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

你也必须为#right block做同样的事情...... http://jsfiddle.net/ytexqtyg/

Answer 6

我现在将your other question的答案添加到此主题中以及确保它不会因为我认为你的另一个而迷失问题可能会因此重复而被关闭。

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

活跃的＆＃34;标志＆＃34;是为了确保您只在活动菜单上切换.open类。

此外，您还需要保持解除hover事件的绑定，否则您将不断重新绑定hover，从而导致元素绑定多个hover事件，然后< strong> all 执行并互相矛盾。

请注意，使用jQuery hover取消绑定off('hover')/unbind('hover')事件时，无法解除绑定mouseenter和mouseleave事件，因为这些事件受jQuery绑定使用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');
        }
    });
});

DEMO - 为活动菜单使用单独的指标

jQuery toggleClass意外行为[UPDATE]

6 个答案: