jQuery 面板不会一次切换活动类/折叠一个答案

【问题标题】：jQuery Panel Will Not Toggle Active Class/Collapse One at a TimejQuery 面板不会一次切换活动类/折叠一个
【发布时间】：2017-02-23 05:18:38
【问题描述】：

我有两个 div - 一个面板 div 控制在另一个 div 上显示的内容。问题是当面板处于活动状态以及面板下的子项目也处于活动状态时，我必须应用“选定”类。现在，它不会在活动时“切换”选定的类。这就是我目前所拥有的......

jQuery

$('.options-display .options-list').hide();
$('#option-1').show(); // change to whatever is shown first on page
$('.collapse p').click(function(){
    $(this).toggleClass('.selected');
    var target = '#' + $(this).data('target');
    $('.options-list').not(target).hide();
    $(target).show();
});

jsfiddle

https://jsfiddle.net/peyton_fields98/48d8zut7/

【问题讨论】：

标签： javascript jquery panel collapse

【解决方案1】：

它按书面规定工作，但可能与预期不符。有两个方面可能不明显导致您的困惑。

首先，这也是我犯的一个常见错字，当在切换（或 addClass 或 removeClass）中使用类名时，请确保您没有为选择器包含 .

//$(this).toggleClass('.selected');
$(this).toggleClass('selected');//should be this
//                   ^no `.`

注意：使用这种方法仍然会保留原始的“选定”类。也许你应该在这行代码前面加上

$('.collapse .selected').removeClass('selected');

第二，在点击回调中this绑定将是单击的元素，在您选择子项时，它是<p>元素。如果您想为整个部分设置样式，那么在这些情况下，selected 类可能应该位于父 div 上。由于您遗漏了 selected 类的样式，因此很难判断。

【讨论】：

嘿@travis-j。这行得通！我刚刚添加了这些选定的类，以真正看到差异并查看它是否有效。