我有简单的切换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);
});
查看更新的小提琴工作正常:
https://jsfiddle.net/9a1n8xtw/7/
| 归档时间： |
|
| 查看次数： |
331 次 |
| 最近记录： |