.toggleClass无效

时间:2017-07-12 15:32:01

标签: jquery wordpress

我认为这是一个简单的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;
}

2 个答案:

答案 0 :(得分:0)

$(".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')

答案 1 :(得分:0)

我明白了。菜鸟错误。

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

我只是改为$(“。teamTitleDown”),现在它工作得很好