如何重置jQuery切换？

我的菜单结构如下。必要的要求是：如何重置jQuery切换？

每个李必须是一个切换，它可以选择和取消选择项目1-4。可以在1-4的范围内选择多个li。因此，用户可以选择项目1 &项目3，并且它们的背景都将被突出显示。将鼠标悬停在任何项目和“All”li选项上时，应该有mouseOver/mouseOut背景更改。如果选择了一个项目，那么应该没有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>

来源

2010-10-26 ninu

我认为标题解释了一切。我很想知道我自己:) – 2010-10-26 14:40:39

鉴于Nik的建议从下面我想出来。我会很快发布我的解决方案。 :) – ninu 2010-10-29 13:47:28

我会做这样的事情：

你有选择的元素即[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

来源

2010-10-26 14:50:47

如何重置jQuery切换？

回答

相关问题