Question

我有一个菜单，我需要切换课程，这很容易但我仍然坚持我需要的一个功能......我将解释我的问题：

我有这个列表菜单<li>：

[ALL][ITEM 1][ITEM 2][ITEM 3][ITEM 4][ITEM 5][ITEM 6]

当我选择任何[ITEM]时，它会切换班级itemSelect并取消选择[ALL]（从itemSelect移除班级[ALL]）

如果我选择[ALL]，除了itemSelect

之外，它会从[ALL]移除

$('.my-menu ul.menu li').click(function () {
     $(this).toggleClass("itemSelect");
});

这就是我到目前为止所做的一切：

<div class="my-menu">
  <ul class="menu">
    <li class="tagSelected"> <a rel="All" href="#">ALL</a></li>
    <li class=""> <a href="#" rel="1">ITEM 1</a> </li>
    <li class=""> <a href="#" rel="2">ITEM 2</a> </li>
    <li class=""> <a href="#" rel="3">ITEM 3</a> </li>
    <li class=""> <a href="#" rel="4">ITEM 4</a> </li>
    <li class=""> <a href="#" rel="5">ITEM 5</a> </li>
    <li class=""> <a href="#" rel="6">ITEM 6</a> </li>
  </ul>
</div>

如果它有帮助，那么HTML：

{{1}}

对此的任何帮助将不胜感激。

C

Answer 1

试试这个jsFiddle http://jsfiddle.net/FWtQf/2/。我认为这就是你要找的东西。

修改

更新了jsfiddle http://jsfiddle.net/FWtQf/3/

再次更新http://jsfiddle.net/FWtQf/4/

Answer 2

$('.my-menu ul.menu li').click(function () {
    if(this.rel === "All") {
        $('.my-menu ul.menu li').removeClass("itemSelect");
    }else{
        $(this).toggleClass("itemSelect");
    }
});

Answer 3

试

<div class="my-menu">
  <ul class="menu">
    <li class="tagSelected all"> <a rel="All" href="#">ALL</a></li>
    <li class=""> <a href="#" rel="1">ITEM 1</a> </li>
    <li class=""> <a href="#" rel="2">ITEM 2</a> </li>
    <li class=""> <a href="#" rel="3">ITEM 3</a> </li>
    <li class=""> <a href="#" rel="4">ITEM 4</a> </li>
    <li class=""> <a href="#" rel="5">ITEM 5</a> </li>
    <li class=""> <a href="#" rel="6">ITEM 6</a> </li>
  </ul>
</div>



$('.my-menu ul.menu li').click(function () {
    if($(this).hasClass('all')){
         $(this).siblings('li').removeClass('itemSelect');
         $(this).addClass("itemSelect");
    }
    else {
         $(this).siblings('li.all').removeClass('itemSelect');
         $(this).toggleClass("itemSelect");
    }
});

jQuery使用ALL选择器切换类

3 个答案: