取消选择已激活的列表项并使用jquery默认激活另一个列表项

Question

您好我的网站上有类别列表。如果用户第二次点击该列表类别，则可以取消选择该类别的jquery jquery代码。一旦用户点击所选类别，就应取消选择该类别。默认情况下应选择所有按钮类别。

现在，如果我第二次点击所选类别，则会取消选择该类别，但默认情况下不会选择所有按钮。

代码：

＆＃13;

＆＃13;

jQuery(document).ready(function() {
  jQuery(".tribe-events-category-5").addClass("active");
  jQuery(".tribe-events-category-5").trigger("click");
  jQuery("#legend li").on("click", function() {
    jQuery("#legend li").not(this).removeClass("active");
    jQuery(this).toggleClass("active");
  });
  jQuery(".tribe-events-category-5").addClass("active");
});

＆＃13;

#legend li:not(.active) {
  opacity: 0.3;
}

.tribe-events-category-5 {
  background-color: #800000;
  border-left: 5px solid #800000;
  border-right: 5px solid transparent;
  color: #fff;
  line-height: 1.4em;
  padding-left: 5px;
}

#legend li {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="legend">
  <li class="tribe-events-category-all"><span>All</span></li>
  <li class="tribe-events-category-5"><span>Music</span></li>
  <li><span>Dance</span></li>
  <li><span>Festives</span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过查找All的课程并使用jQuery(this).prev('.tribe-events-category-all').toggleClass("active");来切换它来实现此目标

jQuery(document).ready(function(){
jQuery(".tribe-events-category-5").addClass("active");
jQuery(".tribe-events-category-5").trigger("click");
jQuery("#legend li").on("click", function(){ 
jQuery("#legend li").not(this).removeClass("active");
jQuery(this).toggleClass("active");
if(!$(this).hasClass("tribe-events-category-all") && !$(this).hasClass("active")){
jQuery(this).siblings('.tribe-events-category-all').toggleClass("active");
}
});
jQuery(".tribe-events-category-5").addClass("active");
});

#legend li:not(.active) {   
opacity: 0.3;
}
.tribe-events-category-5{
background-color: #800000;
border-left: 5px solid #800000;
border-right: 5px solid transparent;
color: #fff;
line-height: 1.4em;
padding-left: 5px;
}
#legend li{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="legend">
<li class="tribe-events-category-all"><span>All</span></li>
<li class="tribe-events-category-5"><span>Music</span></li>
<li><span>Dance</span></li>
<li><span>Festives</span></li>
</ul>

Answer 2

不确定这是否是你期望的。只需看看它。这是你的代码的一个小提琴，但已被编辑了一点点而不是使用jQuery，而不是使用jQuery。

＆＃13;

＆＃13;

$(document).ready(function(){

$(".tribe-events-category-5").addClass("active");

$("#legend li").on("click", function(){    
$("#legend li").not(this).removeClass("active");
if($("#legend li").hasClass("active")){
$(".tribe-events-category-all").addClass("active");
}else{
$(".tribe-events-category-all").removeClass("active");
}
 $(this).toggleClass("active");
});

});

＆＃13;

#legend li:not(.active) {   
opacity: 0.3;
}
.tribe-events-category-5{
background-color: #800000;
border-left: 5px solid #800000;
border-right: 5px solid transparent;
color: #fff;
line-height: 1.4em;
padding-left: 5px;
}
#legend li{
cursor:pointer;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="legend">
<li class="tribe-events-category-all"><span>All</span></li>
<li class="tribe-events-category-5"><span>Music</span></li>
<li><span>Dance</span></li>
<li><span>Festives</span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;