Javascript 显示器响应性设计：无

如果能帮上忙，我将不胜感激，我无法解决

我有一份包含在单独部门中的信息列表

在页面加载中，仅显示每个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>  

onclick切换内容的可见性。到目前为止还不错

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

假设我有两列。如果我点击切换可见性，它当然仍然显示4列响应布局中的内容。但我希望未隐藏的内容现在恢复为全宽，因为可能有很多内容，而且看起来很奇怪，只向下延伸了半列。因此，本质上我需要onclick toggle visibility div始终为全屏宽度

我可以用css做这个吗？我尝试过设计“暴露”的div，但没有乐趣

---

任何指点都是最受欢迎的？？？！！！！我相信这很容易，但我尝试了一切，我仍然在学习这一切

我建议尽可能避免使用JavaScript直接更改样式。类更适合于此，它们允许您通过媒体查询自定义样式，以及设置内容更改的动画

首先，将HTML更改为使用类而不是硬样式：

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

最后，使用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;
}

---

您使用的是css框架还是html和css。在JSFIDLE中添加代码。@请在SO代码段中添加代码。请添加包括css在内的完整代码styles@harsh到目前为止，我所拥有的只是.listing div上的样式。这里是2列布局。如何让onclick进入1列？！Thaknks.清单{border:1px solid 009999；color:fff；background color:009999；text align:center；width:45%；float:left；margin:5px；}'@davidereves媒体查询在哪里？非常感谢您的指导。我试过你的代码，它的工作原理和我自己的尝试一样。但我也有同样的问题。如果div class=listing的宽度为45%，单击它时，.listing-item.visible仍为45%。我希望它恢复到100%的宽度后变得可见！布局在这里。这是专为手机/平板电脑设计的。假设我们在风景区。2列是标题的最佳选择。但点击后，它应该恢复为全宽，而不考虑可见分区的宽度。当前，.visible将一直延伸到屏幕左侧。甚至不确定这是否可能！因此，您希望外部div在内部项可见时展开，还是希望内部div在父容器外部展开？注意：两者都可以，但需要不同的方法。谢谢。是的，我希望内部div在其父级之外展开onclick，扩展到全宽。我在做这样的事情时感到很高兴

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

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

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