在显示/隐藏时显示属性
我正在设计媒体查询。在较大的设计中,我有几件物品被hide();
隐藏。在显示/隐藏时显示属性
但在较小的设计中,我希望它们保持显示。所以我用了一个display:block !important
值。
现在好了,大版本中的内容被设置为显示。哦,混乱!
风格:
@media only screen and (min-width: 180px) {
.backCat{display:block !important;}
}
@media only screen and (min-width: 768px) {
.backCat{display:none;} // no clue what to put here
}
HTML:
<div id="releases">
<h3>Releases</h3>
<ul>
<li>
<h4>Strangers on a Plain</h4>
<img src="http://placehold.it/160x160">
<p><b>Released:</b>August 2011</p>
</li>
<li class="backCat"><h4>Nagano Car Rental</h4><img src="100x100.gif">
<p><b>Released:</b>August 2010</p>
</li>
<li class="backCat"><h4>Panic Box</h4><img src="100x100.gif">
<p><b>Released:</b>May 2009</p>
</li>
</ul>
<a href="#" style="float:left; margin-bottom:10px;" class="moreReleases">More Releases</a>
</div> <!-- end releases -->
JS
$(document).ready(function() {
$('.backCat').hide();
$('.moreReleases').click(function(){
$('.backCat').show(500);
$('.moreReleases').hide();
});
});
的!important
声明采取优先次序,因为在你的第一个媒体查询min-width
条件不再成立时,你的第二个满意。将您的第一个媒体查询更改为@media only screen and (min-width: 180px) and (max-width: 767px)
。您也可以简单地将important
置于您的display: none;
声明之后。
您可能需要设置一个最大宽度为小屏幕的版本,因为768是至少180
好了,测试我上面提出这个想法,它的工作原理:
<style>
@media only screen and (min-width: 180px) {
.moreReleases{ display: none; }
}
@media only screen and (min-width: 768px) {
.backCat{display:none;}
a.moreReleases{display: inline;}
}
</style>
<div id="releases">
<h3>Releases</h3>
<ul>
<li>
<h4>Strangers on a Plain</h4>
<img src="http://placehold.it/160x160">
<p><b>Released:</b>August 2011</p>
</li>
<li class="backCat"><h4>Nagano Car Rental</h4><img src="100x100.gif">
<p><b>Released:</b>August 2010</p>
</li>
<li class="backCat"><h4>Panic Box</h4><img src="100x100.gif">
<p><b>Released:</b>May 2009</p>
</li>
</ul>
<a href="#" style="float:left; margin-bottom:10px;" class="moreReleases">More Releases</a>
</div> <!-- end releases -->
<script language="javascript">
$(function() {
$('.moreReleases').click(function(){
$('.backCat').show(500);
$('.moreReleases').hide();
});
});
</script>
在小布局我们不做任何事情,只是让链接显示(并隐藏更多发布链接,因为它不需要)。在较大的显示器上,我们默认隐藏块并显示moreReleases链接。点击链接就可以完成之前的操作,显示块并隐藏链接。
.hide()是“浏览器的大小无关”,也不管你的浏览器的大小是什么将运行,这就是为什么被较小的屏幕上删除.backCat。你想从js中删除它。
一旦你的走了,你会因此它读取需要删除重要:
@media only screen and (min-width: 180px) { .backCat{display:block;} }
现在.backCat将显示在小屏幕上,但是被在更大的屏幕关闭。剩下的就是你必须使其显示(使用显示:块或东西)为.moreReleases添加stying时.backCat被隐藏,并隐藏(即显示:无)时,会显示.backCat。
希望这会有所帮助!
为什么你需要使用hide()调用来将它们隐藏在更大的视图中?如果您在小设计中删除display:block行,则会应用较大视图中的display:none样式,并且不需要显式hide()调用? – Tarwn
您是否曾尝试在您的第一个.backcat上放置最大宽度以防止重叠? @media只有屏幕和(最小宽度:180像素)和(最大宽度:767px) – themerlinproject
大家好只是一个快速的道歉,我没有看到响应,直到如今。我相信答案就在这里!将很快恢复与复选标记:) – mrtunes