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

Question

您好，我的网站中有类别列表。如果用户第二次单击该列表类别，则为取消选择该类别的书面 jquery 代码。一旦用户单击所选类别，它应该被取消选择并默认选择所有按钮类别。

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

代码：

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");
});

#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 1

不确定这是否是您所期望的。看看它。这是您的代码的一个小提琴，但已经编辑了一点，而不是一直使用 jQuery，您可以使用 $ 代替。

$(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");
});

});

#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://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>

Answer 2

您可以通过查找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>