jQuery如何实现li点击后保留hover效果且多个ul可同时激活选中项

问题1：点击后的li hover效果失效解决 #

原因 #

你的li.active样式和ul li:hover样式优先级接近，且li.active定义在CSS文件的更靠后位置，同属性的后定义样式会覆盖前定义样式，所以当li处于active状态时，:hover设置的边框色被active的样式覆盖，看起来就像hover失效了。

修复方案 #

提升hover选择器的优先级，将原hover样式替换为：

ul li.cls:hover {
  border-color: #cc4e00;
}

修改后hover选择器优先级高于li.active，不管li是否被选中激活，hover效果都能正常触发。

问题2：两个ul同时保留激活状态实现 #

你当前给出的JS代码本身就已经满足该需求：

• 两个ul的点击事件是独立绑定的，siblings()方法只会选中当前li的同父级（同一个ul下）的兄弟元素，只会移除当前ul内其他li的激活状态，完全不会影响另一个ul的激活类，正常运行时两个ul可以各保留一个激活的li。
• 如果实际测试时不生效，可排查是否存在其他全局JS逻辑误删除了所有li的active类。

完整修改后可运行代码 #

CSS部分

ul li.cls:hover {
  border-color: #cc4e00;
}

.result_hover {
  border-color: #cc4e00;
}

.cls {
  height: 50px;
  border: 1px solid;
  border-color: rgb(226, 226, 226);
}

li.active {
 border-color: #cc4e00;
}

JS部分（仅删除了多余的重复分号）

$("#id_of_ul").on("click", "li", function () {
  $(this).toggleClass("active").siblings(".active").removeClass("active");
});
$("#id_of_ul1").on("click", "li", function () {
  $(this).toggleClass("active").siblings(".active").removeClass("active");
});

HTML部分（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="mt-1 mb-0" id="id_of_ul">
    <li id="a1" class="cls">
      <span class="spnCls" id="spn_a1"><img src="img" alt="" class="img-fluid"></span>
      <label>1</label>
    </li>
    <li id="a2" class="cls">
      <span class="spnCls" id="spn_a2"><img src="img" alt="" class="img-fluid"></span>
      <label>2</label>
    </li>
    <li id="a3" class="cls">
      <span class="spnCls" id="spn_a3"><img src="img" alt="" class="img-fluid"></span>
      <label>3</label>
    </li>
    <li id="a4" class="cls">
      <span class="spnCls" id="spn_a4"><img src="img" alt="" class="img-fluid"></span>
      <label>4</label>
    </li>
  </ul>
<ul class="mt-1 mb-0" id="id_of_ul1">
        <li id="a11" class="cls">
          <span class="spnCls" id="spn_a11"><img src="img" alt="" class="img-fluid"></span>
          <label>1</label>
        </li>
        <li id="a12" class="cls">
          <span class="spnCls" id="spn_a12"><img src="img" alt="" class="img-fluid"></span>
          <label>2</label>
        </li>
        <li id="a13" class="cls">
          <span class="spnCls" id="spn_a13"><img src="img" alt="" class="img-fluid"></span>
          <label>3</label>
        </li>
        <li id="a14" class="cls">
          <span class="spnCls" id="spn_a14"><img src="img" alt="" class="img-fluid"></span>
          <label>4</label>
        </li>
      </ul>
</div>

内容的提问来源于stack exchange，提问作者Teresa