时间戳

首页 > 解决方案 > 如何在移动时创建标签列表？

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

问题描述

我写的下面的HTML和CSS代码没有问题，但是我使用的是Flexbox系统，我希望我在这个标题中的列表隐藏起来，变成手机屏幕上的tablist，就像下面的例子一样；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>

标签： htmlcsstabs

解决方案

这是一个javascript解决方案。

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

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

列表显示类型是toggle -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>

推荐阅读