複数の要素を追加および削除するためのクラス (JQuery および JavaScript)

Question

前回の質問でコードを編集するための適切な回答を得ることができました。前の質問へのリンク: 複数の要素のクラスの追加と削除 ここで、前のコードを開発し、アイコンをクリックしたときにコンテンツが表示または非表示になるようにコンテンツを追加しました。このコードの問題は、使用可能なアイコンをクリックすると、すべてのアイコンの内容が表示または非表示になることです。しかし、それは私が望んでいることではありません。各アイコンをクリックすると対応するコンテンツを表示し、別のアイコンをクリックするとすべてのコンテンツが非表示になり、クリックしたアイコンに関連するコンテンツのみが表示されるようにしたいと考えています。 $('本体').on('

P粉359850827 · Answer

したがって、他のコンテンツも削除したい場合は、別のコンテンツが開いている場合は、コード行を追加するだけです:

$(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");

別の行を開くと、上の行の他のコンテンツが削除または非表示になります。

これはデモです:

$('body').on('click', '.icon_product', function() {
    $(this).toggleClass("change_icon-product");
    $(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
    $(this).find(".txt-content").toggleClass("Toggle_txt-content");
    $(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");
 });

＃＃＃＃＃＃体 { 背景: 透明; /* 必要に応じて白にしてください */ 色: #fcbe24; パディング: 0 24px; マージン: 0; 高さ: 100vh; ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; フォントファミリー: -apple-system、BlinkMacSystemFont、「Segoe UI」、Roboto、Oxygen、Ubuntu、Cantarell、「Open Sans」、「Helvetica Neue」、サンセリフ; } .icon_product { 表示: インラインブロック; カーソル: ポインタ; 位置: 相対的; パディング: 15px; マージントップ: 0px; } .icon-line1_product、 .icon-line2_product { 幅: 35ピクセル; 高さ: 5px; 背景色: #f00; マージン: 6px 0; 境界半径: 10px; トランジション: すべて 0.6 秒のイーズインアウト。 -webkit-transition: すべて 0.6 秒イーズインアウト; -moz-transition: すべて 0.6 秒のイーズインアウト。 -o-transition: すべて 0.6 秒のイーズインアウト。 -ms-transition: すべて 0.6 秒のイーズインアウト。 } .icon-line2_product { 変換: 回転(90度) 変換(-11px, 0px); -webkit-transform: 回転(90度) 変換(-11px, 0px); -moz-transform: 回転(90度) 変換(-11px, 0px); -o-transform: 回転(90度) 変換(-11px, 0px); -ms-transform: 回転(90度) 変換(-11px, 0px); } .change_icon-product .icon-line1_product { 変換: 回転(45度) 変換(8px, 0px); -webkit-transform: 回転(45度) 変換(8px, 0px); -moz-transform: 回転(45度) 変換(8px, 0px); -o-transform: 回転(45度) 変換(8px, 0px); -ms-transform: 回転(45度) 変換(8px, 0px); } .change_icon-product .icon-line2_product { 変換: 回転(-45度) 変換(8px, 0px); -webkit-transform: 回転(-45度) 変換(8px, 0px); -moz-transform: 回転(-45度) 変換(8px, 0px); -o-transform: 回転(-45度) 変換(8px, 0px); -ms-transform: 回転(-45度) 変換(8px, 0px); } /* * * * */ .txt-content { 表示: なし。 } .Toggle_txt-content { 表示ブロック; }


            
                
                    

                    

                        ローレム・イプサム
                        
                            顧客自身、顧客が企業の利益を追求できるようになる。彼は私たちのために他のニーズにも応えてくれます
                            これらの快楽を逃がすのは、やがて訓練が苦痛を伴うものになるからである。
                        
                    

                
            

            
                
                    
                    

                    
                        ローレム・イプサム
                        
                            顧客自身、顧客が企業の利益を追求できるようになる。彼は私たちのために他のニーズにも応えてくれます
                            これらの快楽を逃がすのは、やがて訓練が苦痛を伴うものになるからである。
                        
                    

                
            

            
                
                    
                    

                    
                        ローレム・イプサム
                        
                            顧客自身、顧客が企業の利益を追求できるようになる。彼は私たちのために他のニーズにも応えてくれます
                            これらの快楽を逃がすのは、やがて訓練が苦痛を伴うものになるからである。

#