Question

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

每个li必须是一个切换位置，可以为项目1-4选择和取消选择。可以在1-4的范围内选择多个li。因此用户可以选择第1项和第1项。项目3及其背景都将突出显示。将鼠标悬停在任何项目和“所有”li选项上时，应该有一个mouseOver / mouseOut背景更改。如果选择了一个Item，那么mouseOver / mouseOut应该没有悬停状态。

最后，如果选择“全部”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>

Answer 1

我会这样做：

你有一个包含所选元素索引的数组，即[2,23,5,1]。
当选择新元素时，函数需要检查数组是否具有最大允许元素。即如果是4，则删除第一个元素并添加新单击。
然后你必须取消选择所有元素并选择数组中的元素。

你第一次有空数组：[] 在第一个选定的元素[2] 在第二[2,23] 等等。

当元素为4 [2,23,5,1]并且您在第7个元素上单击时，然后从数组中删除2并在最后添加7。它看起来像是：[23,5,1,7]

然后你做：

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

然后循环数组并添加数组中每个元素的liselected类。

HTH

如何在jQuery中重置切换？

1 个答案: