jQueryパネルはアクティブなクラスを切り替えることはありません/同時に1つを折りたたみます

Question

私は2つのdivを持っています - 1つのパネル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

です。あなたの混乱につながったことは明らかではないかもしれない2つの側面があります。

まず、これはトグル（またはaddClassまたはremoveClass）でクラス名を使用しているとき、私は、同様に作られている一般的なタイプミスであるあなたは、セレクタ

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

ため.が含まれていないことを確認してください注意：このアプローチを使用すると、元の「選択された」クラスは元のままです。おそらく、あなたは、サブ項目を選択する際の要素がクリックされ、そしてあなたの例になるだろう、クリックコールバックで結合、

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

セカンドでthisをコード行を前書きする必要があり、それは<p>要素です。セクション全体のスタイルを設定する場合は、おそらくselectedクラスを親divに配置する必要があります。 selectedクラスのスタイリングを省略したときは、それを伝えるのは難しいです。