How to reset switch to jQuery?

Question

The menu structure that I have is given below. Necessary requirements:

Each li should be a switch, where it can be selected and deselected for items 1-4. Many li can be selected between a range of 1-4. Thus, the user can select item 1 and item 3, and their background will be highlighted. When you hover over any of the elements and elements of the selection "All" li there should be a change in focus mouseOver / mouseOut. If an item is selected, then there should be no mouseOver / mouseOut hover state.

Finally, if "All" li is selected, the remaining elements (if selected) should all reset to put them in a switching state and deselect. Then, if another item is selected after this, the "All" selection should also reset.

Here is what I still have, and I have a freeze state that works great for all components. I don’t know how to record a U-turn operation to reset all elements 1-4 when “All” is selected, therefore the “state” of elements 1-4 is reset, and then also reset for the “All” button, if it is selected, and then the element is selected 1-4.

Sorry for the verbosity, but I want to try to explain it as best as possible so that 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:

• you have an array with the indices of the selected elements, that is [2,23,5,1].
• , . 4, , .
• .

, : [] [2] [2,23] ..

4 [2,23,5,1], , , 7- , 2 7 . : [23,5,1,7]

:

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

, .