CODEWITHSUNDEEP
javascriptjqueryhtml
Savado
Savado

Reputation: 585

jQuery toggleClass conflict

For a new webdesign I have two 50% width slider div's as a menu, and I want to add/remove/toggle the 'open' class with jQuery. On the click of one of the .menul, the #left should have added class .open, unless #right:hover and the other way around. The first time you click it it works, but the second time you click it seems to be that the toggleClass is stuck / not updated... Does anyone know how to fix this?

Here's my 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>

And here's my 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')});
});

And here's the fiddle: http://jsfiddle.net/ytexqtyg/2/

Any help would be very much appreciated!

Upvotes: 1

Views: 536

Answers (1)

Nope
Nope

Reputation: 22339

I had another look and you will have to add another class or data attribute to differentiate between an active-and-closed menu and a active-and-open menu or this won't work.

The active "flag" is to ensure you only toggle the .open class on an active menu.

In addition you also need to keep unbinding the hover event as otherwise you are constantly re-binding the hover, causing the element to have multiple hover events bound which then will all execute and contradict each other.

Note that when unbinding the hover event using jQuery off('hover')/unbind('hover') doesn't work and you must unbind the mouseenter and mouseleave events as those are bound by jQuery when using selector.hover(...)

The new JavaScript code is as follows:

$('.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 - Using a separate indicator for an active menu

Upvotes: 1

Related Questions