Question

显然平板电脑视图中的元素悬停状态存在问题。

我已经制作了一个示例，其中我有一个位置固定的标题，其中有一个元素可以悬停并显示下拉内容。我正在使用其他类来显示下拉内容。下拉内容将显示在mouseenter上并隐藏在mouseleave上或当窗口滚动时如下：

$('.custom-dropdown').on('mouseenter', function(){
    $(this).children('.dropdown-content').addClass('active');
}).on('mouseleave', function(){
    $(this).children('.dropdown-content').removeClass('active');
})

$(window).scroll(function () {
    document.activeElement.blur();
    $('.custom-dropdown').trigger('mouseleave');
});

以下是示例：https://jsfiddle.net/tja9scg4/

这在使用鼠标交互的桌面模式下工作正常，但只有在使用平板电脑视图时才会出现问题（我使用Chrome的开发人员工具来复制它）。因此，在平板电脑模式下，如果您点击“将鼠标悬停在我面前”，则会显示下拉内容。现在尝试滚动它，这应该隐藏下拉内容。但是当你点击“Hover Me＆＃39;再一次，它不会表现出来。我认为这是因为“Hover Me＆＃39;仍然专注的元素。

所以我想知道是否有人可以帮我这个？提前谢谢。

Answer 1

感谢您的帮助，我决定添加点击事件，因此无论悬停状态如何，下拉列表都会始终显示。这是代码：

$('.custom-dropdown').on('mouseenter', function () {
        $(this).children('.dropdown-content').addClass('active');
    }).on('mouseleave', function () {
        $(this).children('.dropdown-content').removeClass('active');
    }).on('click', function () {
        $(this).children('.dropdown-content').addClass('active');
    });

如果有人有最佳实践，请随时分享。现在，我认为这样可以正常工作..

删除无法在平板电脑模式下运行的活动元素

1 个答案: