Question

我有两个div - 一个面板div控制另一个div上显示的内容。问题是我必须应用一个＆＃39;选择＆＃39;面板处于活动状态时以及面板下的子项也处于活动状态时的类。现在，它没有＆＃34;切换＆＃34;激活时选定的类。这就是我到目前为止......

的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）中使用类名时，请确保您没有为选择器包含.

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

要注意：使用这种方法仍然会留下原始的＆＃34;选择＆＃34;班级完整。也许你应该在这行代码前加上

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

其次，点击回调中的this绑定将是单击的元素，并且在您选择子项时的示例中，它是<p>元素。如果您想要整个部分的样式，那么在这些情况下，selected类可能应该在父div上。当你遗漏了selected类的样式时很难说。

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

1 个答案: