javascript - 如何使用 jquery 向所有 li 添加类而不是单击 li

Question

我想向所有 li 添加一个 hidden 类，但不向被单击的 li 添加。我怎样才能使用 jQuery 做到这一点？

<ul class="render-menu">        
  <li class="font-size">list 1</li>
  <li class="font-size">list 2</li>
  <li class="font-size">list 3</li>
  <li class="font-size">list 4</li>
</ul>

jQuery(".render_menu li").on('click', function() { 
  alert();
  jQuery(".render_menu").not($(this)).parent().addClass('hidden');
});

Answer 1

首先请注意，您在 HTML 中的 class 是 render-menu，而 JS 使用的是 render_menu。您需要使它们保持一致。

关于这个问题，您正在将类添加到 li 的 parent() 中，即。 ul，所以 所有 子元素都受到该类的影响。要解决此问题，请在调用 addClass() 之前使用 siblings() 获取所需的所有 li 元素。试试这个:

$(".render-menu li").on('click', function() {
  $(this).siblings().addClass('hidden');
});

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="render-menu">
  <li class="font-size">list 1</li>
  <li class="font-size">list 2</li>
  <li class="font-size">list 3</li>
  <li class="font-size">list 4</li>
</ul>