我有简单的切换 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，当我返回其原始位置的窗口时，悬停不起作用。如何解决这个问题？
最佳答案
你有 :hover伪在你的 CSS 上。虽然存在这种情况，但该行为仍然存在。
您可以添加 .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);
});
查看更新后的 fiddle 工作正常:
关于仅在小窗口上触发 Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33648085/