在显示/隐藏时显示属性

我正在设计媒体查询。在较大的设计中，我有几件物品被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 -->

$(document).ready(function() { 
    $('.backCat').hide(); 
    $('.moreReleases').click(function(){ 
     $('.backCat').show(500); 
     $('.moreReleases').hide(); 
    }); 
});

来源

2011-12-08 mrtunes

为什么你需要使用hide（）调用来将它们隐藏在更大的视图中？如果您在小设计中删除display：block行，则会应用较大视图中的display：none样式，并且不需要显式hide（）调用？ – Tarwn

您是否曾尝试在您的第一个.backcat上放置最大宽度以防止重叠？ @media只有屏幕和（最小宽度：180像素）和（最大宽度：767px） – themerlinproject

大家好只是一个快速的道歉，我没有看到响应，直到如今。我相信答案就在这里！将很快恢复与复选标记:) – mrtunes

的!important声明采取优先次序，因为在你的第一个媒体查询min-width条件不再成立时，你的第二个满意。将您的第一个媒体查询更改为@media only screen and (min-width: 180px) and (max-width: 767px)。您也可以简单地将important置于您的display: none;声明之后。

来源

2011-12-08 19:02:39 Aaron

您可能需要设置一个最大宽度为小屏幕的版本，因为768是至少180

来源

2011-12-08 19:04:03 Robo

好了，测试我上面提出这个想法，它的工作原理：

<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链接。点击链接就可以完成之前的操作，显示块并隐藏链接。

来源

2011-12-08 19:19:51 Tarwn

.hide（）是“浏览器的大小无关”，也不管你的浏览器的大小是什么将运行，这就是为什么被较小的屏幕上删除.backCat。你想从js中删除它。

一旦你的走了，你会因此它读取需要删除重要：

@media only screen and (min-width: 180px) { .backCat{display:block;} }

现在.backCat将显示在小屏幕上，但是被在更大的屏幕关闭。剩下的就是你必须使其显示（使用显示：块或东西）为.moreReleases添加stying时.backCat被隐藏，并隐藏（即显示：无）时，会显示.backCat。

希望这会有所帮助！

来源

2011-12-08 20:04:35

在显示/隐藏时显示属性

回答

相关问题