Jquery 仅在小窗口上触发答案

【问题标题】：Jquery trigger only on small windowJquery 仅在小窗口上触发
【发布时间】：2015-11-11 09:56:20
【问题描述】：

我有简单的切换 div。我需要在大屏幕段落content 悬停时打开，点击时在小屏幕上。我尝试这样做：

HTML：

<div class="container">
    <div class="headline">Headline exaple</div>
    <p class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quia nulla, rem harum, minima sint assumenda perferendis cupiditate rerum corporis obcaecati, quam natus repudiandae veniam dolor. Maiores commodi sequi, esse.
    </p>
</div>

CSS：

.container {
    width: 400px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.headline {
    background: #ccc;
    padding: 5px;
    cursor: pointer;
}

.headline:hover + .content {
    display: block;
}

.content {
    padding: 5px;
    display: none;
}

jQuery:

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

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

但它不能正常工作。当我更改窗口大小时，content 在悬停时仍然打开。我点击了headline，当我返回其原始位置的窗口时，悬停不起作用。如何解决这个问题？

JSFiddle

【问题讨论】：

悬停行为由css控制，无论屏幕大小，它都会一直发生
你可以通过 js 添加一个类，如果它的存在阻止 css 中的悬停。
在悬停中删除你的css并在jquery中做。

标签： jquery html css

【解决方案1】：

您的 CSS 上有 :hover 伪。虽然这存在，但行为仍然存在。

您可以将.small-window 类添加到您的<html> 标记并用它来控制它。

https://jsfiddle.net/9a1n8xtw/4/

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

还有CSS

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

更新

为避免slideToggle() 覆盖样式，您可以像这样删除样式属性：

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

查看更新后的小提琴工作正常：

https://jsfiddle.net/9a1n8xtw/7/

【讨论】：

如果您在小屏幕上单击标题，而在大屏幕上悬停将不起作用
我不明白你的评论。此解决方案工作正常。如果这不适合您的问题，请更好地解释您需要什么
它在小屏幕上点击，在大屏幕上悬停。我不知道你想告诉我们什么，...
做一个小屏浏览器，点击标题。一切正常！但是如果返回大小返回然后悬停不起作用
是的，它有效。唯一不起作用的方法是在 onload 页面中，因为您在调整大小事件中有计算。但它有效。在小提琴的窗口中尝试。您可以调整预览视图的大小并查看它是否有效。在 Firefox 42 上测试