Question

The menu structure I have is given below. The necessary requirements are:

Each li must be a toggle where it can be selected and deselected for items 1-4. Multiple li’s can be selected between the range of 1-4. So a user could select Item 1 & Item 3 and their background would both be highlighted. Upon hovering over any of the Items and the “All” li selection items, there should be a mouseOver/mouseOut background change. If an Item is selected, then there should be no hover state of mouseOver/mouseOut.

Finally if the “All” li is selected, the rest of the Items (if selected) should all reset their toggle states and become deselected. Then if another Item is selected after that, the “All” selection should reset itself as well.

Here’s what I’ve got so far and I have the hover state working fine for all the components. I don’t know how to write the unbinding operation for the reset of all the Items 1-4 when “All” is selected so the ‘state’ of the Items 1-4 resets, and then also the reset for the “All” button if it is selected and then an Item 1-4 is chosen afterwards.

Sorry to be wordy but I want to try and explain it as best as possible so there is no confusion. 🙂

//css
.liselected{
background-color:#256ca0;
}

.lihoveron{
background-color:#eceef5;
}




$(document).ready(function() {

var startToggle = function(){
$('li[id|=nav]').toggle(
    function() {
        $(this).addClass('liselected').children().css('color','#ffffff');
        $(this).removeClass('lihoveron');
    },
    function() {
        $(this).removeClass('liselected').children().css('color','#5D788B');
    }).mouseover(function() {
        $(this).css('cursor','pointer');
    }).hover(function() {
        if ( $(this).hasClass('liselected') ){
        }
        else{
            $(this).addClass('lihoveron');
        }
    }, function() {
    $(this).removeClass('lihoveron');
});
};

startToggle();

});



<ul>
<li id="nav-all">
    <a class="item" href="">
        All Items
    </a>
</li>
<li id="nav-item1">
    <a class="item" href="">
        Item 1
    </a>
</li>
<li id="nav-item2">
    <a class="item" href="">
        Item 2
    </a>
</li>
<li id="nav-item3">
    <a class="item" href="">
        Item 3
    </a>
</li>
<li id="nav-item4">
    <a class="item" href="">
        Item 4
    </a>
</li>
<li id="nav-item5">
    <a class="item" href="">
        Item 5
    </a>
</li>

Answer 1

I would do it something like this:

1. you have an array with indices of selected elements i.e. [2,23,5,1].
2. when a new element is selected a function need to check if the array has max allowed elements. i.e. 4 if so, remove the first element and add the new clicked.
3. then you have to deselect all elements and make selection of the elements in the array.

in the first time you have empty array: []
on first selected element [2]
on the second [2,23]
and so on.

when elements are 4 [2,23,5,1] and you clicked for example on 7-th element then you remove 2 from the array and add 7 in the end.
it will look like: [23,5,1,7]

then you make:

$('li.elementsClass').removeClass('liselected')

and then loop the array and add class liselected of each element in the array.

HTH