javascript - 显示响应式设计 :none

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