如何在jquery中重置切换?

我的菜单结构如下。必要的要求是:

每个LI必须是一个切换开关,可以在其中为项目1-4选择和取消选择。在1-4之间可以选择多个LI。因此,用户可以选择项目1和项目3,它们的背景都将突出显示。当鼠标悬停在任何项目和“全部”li选择项目上时,应该有一个鼠标悬停/鼠标悬停背景更改。如果选择了某个项目,则鼠标悬停/鼠标悬停状态不应存在。

最后,如果选择了“全部”li,其余的项目(如果选择)都应重置它们的切换状态并取消选择。然后,如果在此之后选择了另一个项目,则“全部”选择也应自动重置。

这是我到目前为止所得到的,并且悬停状态对于所有组件都可以正常工作。当选择“全部”时,我不知道如何编写所有项目1-4重置的解除绑定操作,因此项目1-4的“状态”重置,如果选择了“全部”按钮,则还将重置,然后选择项目1-4。

很抱歉这么说,但我想尽量解释清楚,这样就不会有混淆。:)

//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>