jQuery 面板不會一次切換活動類/折疊一個

Question

我有兩個 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();
});

提琴手

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

Answer 1

它按書面方式工作，可能不是預期的那樣。 有兩個方面可能並不明顯導致您的困惑。

首先，這也是我犯的一個常見錯字，在切換（或 addClass 或 removeClass）中使用類名時，請確保不包含. 對於選擇器

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

注意：使用這種方法仍然保持原始的“選定”類完好無損。 也許你應該在這行代碼前加上

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

其次，單擊回調中的this綁定將是單擊的元素，在您選擇子項的示例中，它是<p>元素。 在這些情況下，如果您想為整個部分設置樣式，則可能selected類應該位於父 div 上。 由於您遺漏了selected課程的樣式，因此很難說。