顯示響應式設計：無

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