尝试切换方法以在单击按钮时引入新的 class

Question

我正在尝试使用 nth-child() 伪 class 为特定 div 元素引入新的 class，但它不起作用！我做错了什么吗？

请注意，menu、container、newClass 已在 CSS 部分中定义，我不会在此处显示它们。

这是我正在尝试的：

$(function() {
  $("button").click(function {
    $("div:nth-child(2)").toggleClass("newClass");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle CSS</button>
<div class="container">
  <div class="menu">
    <lu>
      <li>option 1</li>
      <li>option2</li>
      <li>option 3</li>
    </lu>
  </div>
</div>

Answer 1

你的代码中有很多错误。你想给哪个div添加一个classnewClass？我认为你的代码应该是这样的

$(function() {
    $("button").on('click', function() {
        $(".menu").toggleClass("newClass");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle CSS</button>
<div class="container">
  <div class="menu">
    <ul>
      <li>option 1</li>
      <li>option2</li>
      <li>option 3</li>
    </ul>
  </div>
</div>

Answer 2

我的错误

我不应该使用

<script>
$("div:nth-child(2)").toggle Class("newClass");
</script>

这是为 div 元素引入新的 class，带有 class menu ，因为它不是 div 的第二个子元素。下面给出的虽然对我来说工作正常：

更正

<script>
$("div.menu").toggleClass("newClass");
</script>

That is: to specify div element(whose class is going to be toggled) by tagging its class menu , to call jQuery for div with the class menu . Also by mistake parentheses () were missing.

尝试切换方法以在单击按钮时引入新的 class

Trying toggle method to introduce new class on button click

html

css

jquery

toggle

我的错误

更正