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中执行此操作吗？我已经尝试过“透露”的样式。但没有快乐。

任何指针都会受到欢迎??? !!!!我确定它很容易，但我尝试了一切，我还在学习这一切！

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

显示的响应式设计：无

1 个答案: