显示器的响应式设计：无

Question

任何与此有关的帮助将不胜感激，我无法解决。

我有单独的div

内包含的页面加载仅在每个div的标题显示的信息列表。

<div class='listing' >  

<a href="#" onclick="toggle_visibility('interactive');"> 
    <h3 class='title'>Title</h3> 
</a> 

    <div id="interactive" style="display:none;"> 
     <div class="web"><p><a href="#">#</a></p></div> 
     <div class="phone"><p><a href="Tel:#">Tel: #</a></p></div> 
     <div class="email"><p><a href="#">#</a></p></div> 
     <p>copy: ipsum blah </p> 
     <p>Blah Blah</p> 
    </div> 

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
} 

的onclick切换内容的可见性。到现在为止还挺好。

现在说我开始添加一些简单的响应式设计。如果在小屏幕上我想要一列div，没问题。如果稍宽一些，我会进行媒体查询以相应地调整div的宽度。

说我有2列。如果我点击切换可见性，它当然仍然显示4列响应式布局中的内容。但是我希望未隐藏的内容现在可以恢复为全角（可能会有很多内容，并且看起来很奇怪，只能向下延伸半列）。所以基本上我需要onclick切换可见性div始终是全屏宽度。

我可以在css中做到这一点吗？我试图设计'透露'的div，但没有喜悦。

任何指针将是最受欢迎的??? !!!!林肯定它的容易，但我已经尝试了一切，我仍然在学习这一切！

Answer 1

我建议避免使用JavaScript直接更改样式，只要有可能。类更适合这一点，他们可以让你做一些事情，比如通过媒体查询定制样式，以及动画内容更改。

首先，改变你的HTML使用一个类，而不是硬风格：

<div id="interactive" class="listing-item"> 

其次，改变你的JS来切换类，而不是直接改变风格：

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    // Note: classList is IE10+, so you might have to do more work 
    // to support older browsers 
    e.classList.toggle('visible'); 
} 

最后，使用CSS来处理这个魔法：

.listing-item { 
    display: none; 
} 
.listing-item.visible { 
    display: block; 
} 

@media (...) { 
    .listing-item.visible { 
     ... 
    } 
} 

如果你想要看起来，尝试一些CSS3样式：

.listing-item { 
    overflow: hidden; 
    max-height: 0; 
    transition: all 0.2s ease-in-out; 
} 
.listing-item.visible { 
    // pick something reasonable here, to make sure your 
    // content is visible. Too high, and the animation will be off. 
    max-height: 999px; 
    overflow: visible; 
}