Question

我认为这是一个简单的jquery任务。我有手风琴。我没有对代码的完全控制，因为它是一个wordpress的东西。

我给了手风琴标题这段代码：

<div class="teamTitle teamTitleDown">Jordan Gales | Job Title</div>

然后，我添加了这个jquery：

$(".accordion-title").click(function() { $(".teamTitle").toggleClass("teamTitle")});

这些类添加了fontAwesome图标。它原本是一个左插入符，然后当你点击它时就变成了一个向下的插入符号。

toggle类仅适用一次。当我点击时，我在检查工具中看到类teamTitle消失了。在视觉上，我看到图标从左插入符号变为下插入符号。

但随后的点击不再发生任何事情。我希望每次点击都会打开/关闭班级标题。

我是否有代码错误，或者我没有正确理解toggleClass？

如果重要，这里是这两个类的CSS：

.teamTitle:after {
content: '\f0da'!important;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin:0px 0px 0px 10px;
text-decoration:none;
}

.teamTitleDown:after {
content: '\f0d7';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin:0px 0px 0px 10px;
text-decoration:none;
}

Answer 1

$(".teamTitle").toggleClass("teamTitle")}

这是第一次使用，因为$('.teamTitle')匹配您要匹配的元素，并删除了＆＃39; teamTitle＆＃39;从他们那里上课。

第二次不起作用，因为$('.teamTitle')与任何元素都不匹配，因为您已经删除了您尝试匹配的类名。

要么存储DOM元素列表并重复使用它，而不是每次都按类名匹配：

var foo = $('.teamTitle');
// from now on, foo.toggleClass('teamTitle') will operate on the same elements (as long as foo remains in scope!)

或者在你不会打开和关闭的那些元素上添加一个额外的类名，并使用它来识别元素：

<div class="foo teamTitle teamTitleDown">Jordan Gales | Job Title</div>

$('.foo').toggleClass('teamTitle')

Answer 2

我明白了。菜鸟错误。

我使用了选择器$（“。teamTitle”）进行切换，但后来切换了同一个类。所以在我点击一次后，它切换了那个类。但是现在这个班级已经不见了，所以我再也不能选择它了。

我只是改为$（“。teamTitleDown”），现在它工作得很好

.toggleClass无效

2 个答案: