显示响应式设计：无

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;
}