스티커 : 아코디언 패널을 닫을 때 마우스를 올리면 스타일이 적용됩니다.

Question

패널을 열면 .open 클래스가 제목 + 콘텐츠 그룹에 추가되어 스타일을 지정할 수있는 간단한 아코디언이 있습니다. 이것은 잘 작동하지만 나는 패널을 닫기 위해 클릭 할 때 내 호버 스타일링 (활성/열린 스타일링과 동일 함)이 유지된다는 것을 내 전화에서 알게되었습니다. 더하기/빼기 아이콘을 사용하면 모든 아이콘이 동기화되지 않습니다. 페이지의 다른 곳을 클릭하면 스타일이 삭제됩니다. 스타일링이 없으므로 :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

는 다행히 당신이 크롬 브라우저 도구를 사용하여 동일한 효과/문제를 볼 수 있습니다 모바일 장치 중 하나를 사용합니다.

Answer 1

미디어 쿼리를 사용하여 실제로 터치 스크린 장치에서 마우스 오버의 스타일을 무시할 수 있습니다.

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