如何在移动端创建表列表？

Question

我写的超文本标记语言和CSS代码下面没有问题，但我使用的是Flexbox系统，我希望我的列表在这个标题是隐藏的，并变成一个移动屏幕上的表格，就像下面的例子；https://hizliresim.com/SSzKQZ我如何才能得到它？(没有Boostrap)谢谢你的帮助。

​

*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

h1{
  border-bottom: 2px solid red;
  padding-bottom: 1rem;
}

li{
  border-bottom: 1px solid black;
  list-style: none;
  font-size: 14px;
}

#wrap{
  background: black;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  background-color: white;
  display: flex;
}

.main{
  width: 260px;
  height: 260px;
  margin-right: 1rem;
}

.main-1{
  margin-left: 1rem;
}

.tel{
  display: flex;
  flex-direction: column;
  width: 8rem;
  height: 3rem;
  justify-content: center;
  align-items: center;
  border: 2px solid red;
  margin-top: 1rem;
}

.pel{
  display: flex;
  flex-direction: column;
}

    <section id="wrap">
  <div class="container">
    <div class="main main-1">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
  <li>İleri Teknolojiler</li>
  <li>Hasta Hakları Birimi</li>
  <li>Memnuniyet Sağlama Süreci</li>
  <li>Hasta Odaları</li>
  <li>Ameliyathaneler</li>
</ul>
    </div>
    <div class="main main-2">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
  <li>İleri Teknolojiler</li>
  <li>Hasta Hakları Birimi</li>
  <li>Memnuniyet Sağlama Süreci</li>
  <li>Hasta Odaları</li>
  <li>Ameliyathaneler</li>
  <li>Memnuniyet Sağlama Süreci</li>
</ul>
    </div>
    <div class="main main-3">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
</ul>
  </div>

​

Answer 1

这是一个javascript解决方案。

我在你的css中添加了@media (max-width: 550px)。在访问数组时，我使用了forEach()方法：

Array.from(tab).forEach(function(tabArray, i) {...});

列表显示类型是切换- toggle()方法。

有必要这样做吗？

​

function f_width() {  
    let tab = document.querySelectorAll('.main h1');
    let menu = document.querySelectorAll('.main ul');    

    Array.from(tab).forEach(function(tabArray, i) {
      tabArray.addEventListener('click', function() {
      
        if (window.innerWidth <= 550) {
          menu[i].classList.toggle('active_ul');
        } else {} 
        
    });
  });  
}

window.addEventListener("load", f_width);
/*window.addEventListener("resize", f_width);*/

*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

h1{
  border-bottom: 2px solid red;
  padding-bottom: 1rem;
}

li{
  border-bottom: 1px solid black;
  list-style: none;
  font-size: 14px;
}

#wrap{
  background: black;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  background-color: white;
  display: flex;
}

.main{
  width: 260px;
  height: 260px;
  margin-right: 1rem;
}

.main-1{
  margin-left: 1rem;
}

.tel{
  display: flex;
  flex-direction: column;
  width: 8rem;
  height: 3rem;
  justify-content: center;
  align-items: center;
  border: 2px solid red;
  margin-top: 1rem;
}

.pel{
  display: flex;
  flex-direction: column;
}

.active_ul {
  display: block;
}

@media (max-width: 550px) {
  .container {
    flex-direction: column;
  }
  
  .main {
    height: unset;
  }
  
  .main h1 {
    cursor: pointer;
  }
  
  .main-2,
  .main-3 {
    margin-left: 1rem;
    margin-top: 1rem;
  }
  
  .main-3 {
    margin-bottom: 1rem;
  }

  ul {
    display: none;
  }
}

<section id="wrap">
  <div class="container">
    <div class="main main-1">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
  <li>İleri Teknolojiler</li>
  <li>Hasta Hakları Birimi</li>
  <li>Memnuniyet Sağlama Süreci</li>
  <li>Hasta Odaları</li>
  <li>Ameliyathaneler</li>
</ul>
    </div>
    <div class="main main-2">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
  <li>İleri Teknolojiler</li>
  <li>Hasta Hakları Birimi</li>
  <li>Memnuniyet Sağlama Süreci</li>
  <li>Hasta Odaları</li>
  <li>Ameliyathaneler</li>
  <li>Memnuniyet Sağlama Süreci</li>
</ul>
    </div>
    <div class="main main-3">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
</ul>
  </div>

​