如何在移动时创建标签列表？

OyeeBerkay 发表于 Dev

奥耶·伯凯

我写了下面的HTML和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>

谢尔盖·库兹涅佐夫

这是一个JavaScript解决方案。

我@media (max-width: 550px)在您的CSS中添加了。访问数组时，我使用了以下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>