我的选择过程不匹配？

Question

我有一个场景 - 我必须选择一系列具有2个概率的元素：

1. 点击全选。
2. 单独选择。

如果我尝试执行这两个操作，问题就是不匹配。 我选择所有和选择单独运作良好。但问题是当我选择所有内容时，当我单击单个元素然后选择所有内容时效果不佳。 以下是我到目前为止所尝试的内容。现在请帮助我解决这个问题，以便在所有情况下都能正常工作，即 如果我选择了所有，即使在我选择了所有它之后选择它之后点击任何元素之后它应该工作得很好。 同时附加图像以提高清晰度：

  

第1步：



  

第2步：



  

第3步：问题区域



＆＃13;
＆＃13;
$('.SubNavHover li:first-child').click(function() {
  $('.SubNavHover li a').toggleClass('allActive');
  if ($('.SubNavHover li a').hasClass('currentActive')) {
    $('.SubNavHover li a').removeClass('currentActive ').addClass('allActive ');
  }
  if ($(this).nextAll().hasClass('allActive')) {
    $(this).addClass('allActive');
  } else {

    $(this).removeClass('allActive');
  }

});
$('.SubNavHover li a').click(function() {
  $(this).toggleClass('currentActive');
  if ($(this).hasClass('allActive')) {
    $(this).removeClass('currentActive allActive');
  }
  $(this).removeClass('allActive');
});
＆＃13;
ul,
li {
  margin: 0px;
  padding: 0px;
}

a {
  color: black;
}

a.allActive {
  color: blue;
}

a.currentActive {
  color: blue;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="SubNavHover" style="opacity:1; visibility:visible;">
  <li><a href="#">Select All </a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>


</ul>
＆＃13;
＆＃13;
＆＃13;

Answer 1

您可以按尺寸检查活动元素

此条件可以解决您的问题

if($(".currentActive").size() == $(".fa-check").size()){
    $('.SubNavHover li a').toggleClass('currentActive');
}else{
    $('.SubNavHover li a').addClass('currentActive');
}

这是工作代码

$('.SubNavHover li:first-child').click(function() {
  if($(".currentActive").size() == $(".fa-check").size()){
     $('.SubNavHover li a').toggleClass('currentActive');
  }else{
       $('.SubNavHover li a').addClass('currentActive');
  }
 
});
$('.SubNavHover li a').click(function() {
  $(this).toggleClass('currentActive');
});

ul,
li {
  margin: 0px;
  padding: 0px;
}

a {
  color: black;
}

a.allActive {
  color: blue;
}

a.currentActive {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="SubNavHover" style="opacity:1; visibility:visible;">
  <li><a href="#">Select All </a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>


</ul>

Answer 2

改变了JS代码中的一点。

＆＃13;

＆＃13;

$('.SubNavHover li:first-child').click(function() {
  $('.SubNavHover li a').addClass('allActive');
  if ($('.SubNavHover li a').hasClass('currentActive')) {
    $('.SubNavHover li a').removeClass('currentActive ')
  }
});
$('.SubNavHover li a').click(function() {
  $(this).toggleClass('currentActive');
  if ($(this).hasClass('allActive')) {
    $(this).removeClass('currentActive allActive');
  }
  $(this).removeClass('allActive');
});

＆＃13;

ul,
li {
  margin: 0px;
  padding: 0px;
}

a {
  color: black;
}

a.allActive {
  color: blue;
}

a.currentActive {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="SubNavHover" style="opacity:1; visibility:visible;">
  <li><a href="#">Select All </a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>


</ul>

＆＃13;

＆＃13;

＆＃13;

这是工作Fiddle

Answer 3

尝试使用单个类allActive，例如

$(function() {
  $('.SubNavHover li a').click(function(e) {
    e.preventDefault();
    var ulparent = $(this).closest('.SubNavHover');
    $(this).toggleClass('allActive');
    if ($(this).closest('li.select-all').length) {
      ulparent.find('li:not(".select-all") a').toggleClass('allActive', $(this).hasClass('allActive'));
    } else {
       li = ulparent.find('li:not(".select-all")');
       ulparent.find('li.select-all a').toggleClass('allActive',li.find('a.allActive').length===li.find('a').length);
    }
  });
});

ul,
li {
  margin: 0px;
  padding: 0px;
}

a {
  color: black;
}

a.allActive {
  color: blue;
}
ul{float:left;margin: 0 20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="SubNavHover" style="opacity:1; visibility:visible;">
  <li class="select-all"><a href="#">Select All </a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
</ul>
<ul class="SubNavHover" style="opacity:1; visibility:visible;">
  <li class="select-all"><a href="#">Select All </a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
</ul>

Answer 4

您需要删除所有其他selectAll选择的班级名称li并取消选择时间。

$('.SubNavHover li:first-child').click(function() {
if(!$(this).children('a').hasClass('allActive')){
$('.SubNavHover li a').removeClass('allActive').removeClass('currentActive')
$('.SubNavHover li a').addClass('allActive')
}
else{
$('.SubNavHover li:first-child a').removeClass('currentActive').removeClass('allActive')
$('.SubNavHover li a').removeClass('allActive').removeClass('currentActive')
}

});
$('.SubNavHover li:not(:first-child) a').click(function() {
 $('.SubNavHover li:first-child a').removeClass('currentActive').removeClass('allActive')
  $(this).toggleClass('currentActive');
  if ($(this).hasClass('allActive')) {
    $(this).removeClass('currentActive allActive');
  }
  $(this).removeClass('allActive');
  //console.log($(this).attr('class'))
});

ul,
li {
  margin: 0px;
  padding: 0px;
}

a {
  color: black;
}

a.allActive {
  color: blue;
}

a.currentActive {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="SubNavHover" style="opacity:1; visibility:visible;">
  <li><a href="#">Select All </a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>


</ul>