javascript - 粘性 :hover styling when closing accordion panel

Question

我有一个简单的 Accordion ，当你打开一个面板时，一个类 .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');
    });

});

标记:

<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>

连同 CodePen:https://codepen.io/moy/pen/aENWXz

幸运的是，您可以在任何移动设备上使用 Chrome 中的浏览器工具看到相同的效果/问题。

Answer 1

您实际上可以使用媒体查询覆盖触摸屏设备中悬停状态的样式。

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