粘性：关闭手风琴面板时悬停造型

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');
    });

});

标记：

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