スティッキー：アコーディオンパネルを閉じるときにホバースタイリング

Question

パネルを開くときに、タイトル+コンテンツグループにクラス.openが追加されたので、私はそれをスタイルすることができます。これはうまく動作しますが、パネルを閉じるためにクリックすると、ホバースタイリング（アクティブ/オープンスタイリングと同じです）が残っていることがわかりました。プラス/マイナスアイコンを使用すると、すべてが同期しなくなります。他の場所をクリックすると、スタイリングが削除されます。 :focusスタイリングがないので、:hoverをタッチイベントとして解釈する必要がありますか？誰も私がこれを防ぐ方法を提案することはできますか？ここで

は私のスクリプトです：

$(document).ready(function($) { 
    // Add class of `.open` to first `.accordion__title` as it is set to `display: block` in CSS. 
    $('.accordion__item:first-child .accordion__title').addClass('open'); 
    // Accordion fuctions. 
    $('.accordion').find('.accordion__title').click(function(){ 
     // Add class to title. 
     $(this).toggleClass('open'); 
     //Expand or collapse this panel. 
     $(this).next().slideToggle('fast'); 
    }); 

}); 

マークアップ：CodePenとともに

<div class="accordion"> 

    <div class="accordion__item"> 
     <h2 class="accordion__title">Question One <span class="accordion__title-icon"></span></h2> 
     <div class="accordion__copy"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     </div> 
    </div> 

    <div class="accordion__item"> 
     <h2 class="accordion__title">Question Two <span class="accordion__title-icon"></span></h2> 
     <div class="accordion__copy"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 

    <div class="accordion__item"> 
     <h2 class="accordion__title">Question Three <span class="accordion__title-icon"></span></h2> 
     <div class="accordion__copy"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
     </div> 
    </div> 

</div> 

：https://codepen.io/moy/pen/aENWXz

幸いにもあなたがChromeでブラウザのツールを使用して同じ効果/問題を見ることができますモバイルデバイスのいずれかを使用します。

Answer 1

メディアクエリを使用して、タッチスクリーンデバイスのホバー状態のスタイリングを実際に無効にすることができます。

@media (hover: none) { 
    .accordion__title { 
     &:hover{ 
      color: #000; 
     } 
     &.open { 
      color: #c8102e; 
     } 
    } 
}