Панель jQuery не будет переключать активный класс/Свернуть один за раз

Question

У меня есть два divs - одна панель 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/

Answer 1

Она работает, как написано, возможно, не по назначению. Есть два аспекта, которые могут быть не очевидны, что привело к вашей путанице.

Во-первых, это общая опечатка, что я сделал, а также, при использовании имени класса в тумблер (или addClass или removeClass) убедитесь, что вы не включают . для селектора

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

Следует отметить: использование этого подхода по-прежнему оставляет исходный «выбранный» класс неповрежденным. Может быть, вы должны предварить эту строку кода с

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

Во-вторых, this связывание в храповой обратного вызова будет элемент щелкнул, и в вашем примере при выборе подпункта, это <p> элемент. Возможно, класс selected должен быть в родительском div в тех случаях, если вы хотите стилизовать весь раздел. Трудно было сказать, что вы оставили стиль для класса selected.