jQuery 面板不会切换到活动状态 Class/Collapse 一次一个

Question

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

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/

Answer 1

它是按照书面的方式工作的，也许不是预期的那样。有两个可能不是很明显的方面导致了你的困惑。

首先，这也是我犯的一个常见错字，当在切换（或 addClass 或 removeClass）中使用 class 名称时，请确保不包括 .选择器

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

注意：使用此方法仍会保持原始 "selected" class 完好无损。也许你应该在这行代码前加上

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

其次，点击回调中的 this 绑定将成为被点击的元素，在您选择子项的示例中，它是 <p> 元素。在这些情况下，如果您想要设置整个部分的样式，也许 selected class 应该位于父级 div 上。很难判断，因为您遗漏了 selected class.

的样式

jQuery 面板不会切换到活动状态 Class/Collapse 一次一个

jQuery Panel Will Not Toggle Active Class/Collapse One at a Time

javascript

jquery

panel

collapse