Jquery触发器仅在小窗口上

我有一个简单的切换div。我需要在大屏幕上的段落

内容
悬停时打开，在小屏幕上单击时打开。我试着这样做：

$(window).on('resize', function() {
    isSmallWindow = $(this).width() < 768;
    if(isSmallWindow) {
        $('html').addClass('small-window');
    }else {
        $('html').removeClass('small-window');
    }
    $('.content').attr('style', false);
});

HTML:

jQuery：

var isSmallWindow;
$(window).on('resize', function() {
    isSmallWindow = $(this).width() < 768;
});

$('.headline').on('click', function() {
    if (isSmallWindow) {
        $('.content').slideToggle(300);
    }
});

var窗口；
$（窗口）.on（'resize'，function（））{
isSmallWindow=$（this）.width（）<768；
});
$（'.headline'）。在（'click'，function（）上{
如果（窗口）{
$（'.content'）.slideToggle（300）；
}
});

但它不能正常工作。当我更改窗口大小时，悬停时，
内容
仍处于打开状态。我点击了
标题
，当我返回其原始位置的窗口时，鼠标悬停不工作。如何解决这个问题

您的CSS上有
：hover
伪代码。尽管存在这种情况，但这种行为依然存在

您可以将一个
.small window
类添加到
标记中，并用它来控制它


更新
要避免样式被
slideToggle（）
覆盖，可以删除样式属性，如下所示：

$(window).on('resize', function() {
    isSmallWindow = $(this).width() < 768;
    if(isSmallWindow) {
        $('html').addClass('small-window');
    }else {
        $('html').removeClass('small-window');
    }
    $('.content').attr('style', false);
});

$（窗口）.on（'resize'，function（））{
isSmallWindow=$（this）.width（）<768；
如果（窗口）{
$（'html'）.addClass（'small-window'）；
}否则{
$（'html'）.removeClass（'small-window'）；
}
$（'.content'）.attr（'style'，false）；
});

请参阅更新的小提琴工作正常：

悬停行为由css控制，无论屏幕大小，悬停都会发生。您可以通过js添加一个类，如果它存在，则会阻止css中的悬停。在悬停中删除您的css，然后在jquery中执行。如果您在小屏幕上单击标题，而在大屏幕上则无法运行悬停，我不理解您的评论。这个解决方案很好用。更好地解释如果这不适合你的问题，你需要什么。它在小屏幕上用鼠标点击，在大屏幕上用鼠标悬停。我不知道你想告诉我们什么，…制作一个小屏幕浏览器，点击标题。一切都很好！但是如果返回大小返回，那么hover不起作用是的，它起作用。唯一不起作用的方法是在onload页面中，因为在resize事件中有calc。但它是有效的。试试小提琴的窗户。您可以调整预览视图的大小并查看它的工作情况。在Firefox42上测试
$(window).on('resize', function() {
    isSmallWindow = $(this).width() < 768;
    if(isSmallWindow) {
        $('html').addClass('small-window');
    }else {
        $('html').removeClass('small-window');
    }
});

html:not(.small-window) .headline:hover + .content {
    display: block;
}

$(window).on('resize', function() {
    isSmallWindow = $(this).width() < 768;
    if(isSmallWindow) {
        $('html').addClass('small-window');
    }else {
        $('html').removeClass('small-window');
    }
    $('.content').attr('style', false);
});