内容丰富的按钮折叠成图标并显示导航选项卡内容

Question

我正在努力实现这种“效果”或任何所谓的。 我有一个内容丰富的垂直对齐按钮（带有图标、标题文本和普通文本）。

然后当一个按钮被按下时，一组新的垂直对齐按钮（带有图标和普通文本）作为新选项出现。

然后当一个“子按钮”被按下时，会出现一个内容区域。

我尝试了“使用 bootstrap 4 垂直对齐的选项卡”，但我被卡住了：

• 仅显示包含完整内容的主要按钮
• 仅显示主按钮的图标（单击后按钮内容的其余部分被隐藏）+和+子按钮
• 恢复正常，只有主按钮显示完整内容

如下图

我正在使用：Bootstrap 4 + 我懂一点 JS

请帮我解决这个问题，或者指导我到哪里可以得到答案。谢谢

~ 更新：这是我正在研究的一个非常基本的“垂直导航药丸”的链接https://codepen.io/bixet/pen/yxGrLO

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Main<br>Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Main<br>Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Main<br>Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Main<br>Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">

        <div class="row">

          <div class="col-4">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-subhome-tab" data-toggle="pill" href="#v-pills-subhome" role="tab" aria-controls="v-pills-subhome" aria-selected="true">SubHome</a>
      <a class="nav-link" id="v-pills-subprofile-tab" data-toggle="pill" href="#v-pills-subprofile" role="tab" aria-controls="v-pills-subprofile" aria-selected="false">SubProfile</a>
    </div>
  </div>

<div class="col-4">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-subhome" role="tabpanel" aria-labelledby="v-pills-subhome-tab">1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>

      <div class="tab-pane fade" id="v-pills-subprofile" role="tabpanel" aria-labelledby="v-pills-subprofile-tab">2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>      

    </div>
  </div>

        </div>

      </div>

      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">

        <div class="row">

          <div class="col-4">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-subhome2-tab" data-toggle="pill" href="#v-pills-subhome2" role="tab" aria-controls="v-pills-subhome2" aria-selected="true">SubHome</a>
      <a class="nav-link" id="v-pills-subprofile2-tab" data-toggle="pill" href="#v-pills-subprofile2" role="tab" aria-controls="v-pills-subprofile2" aria-selected="false">SubProfile</a>
    </div>
  </div>

<div class="col-4">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-subhome2" role="tabpanel" aria-labelledby="v-pills-subhome2-tab">1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>

      <div class="tab-pane fade" id="v-pills-subprofile2" role="tabpanel" aria-labelledby="v-pills-subprofile2-tab">2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>      

    </div>
  </div>

        </div>

      </div>

      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">3) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>

      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">4) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>

    </div>
  </div>
</div>

Answer 1

我有以下使用纯 CSS 和一些 Javascript 代码的解决方案： （请参阅此fiddle）以获得良好的预览

let menuItems =document.querySelectorAll(".y-menu-item");
menuItems.forEach((item)=>{
    item.addEventListener("click", function(event){
        document.querySelectorAll(".y-texts-wrapper,.y-menu-sublevel-1").forEach((txtw)=>{
            txtw.style.display='none';
        });
        
        item.children[2].style.display='block'
        
    })
})

/********************** */

let subMenuItems=document.querySelectorAll('.y-menu-item-sublevel-1');


subMenuItems.forEach((subItem)=>{
    subItem.addEventListener("click",function(){
      
        document.querySelectorAll(".y-sub-l1-ht,.y-content").forEach((ht)=>{
            ht.style.display='none';
        });
        subItem.children[2].style.display='block'
     
    });
})

body{
    height: 100vh;
    width: 100vw;
    margin: 0;
    font-family: Montserrat,sans-serif;
    color:#333;
}
p{
    font-size: 10pt;
}
.y-menu{
    padding: 20px;
    height: 80%;
    display: flex;
    flex-direction: column;
    
    justify-content: space-between;
    align-items: flex-start;
   
}

.y-menu-item{
    display: flex;
    flex-direction:row;
    align-items: center;
    padding: 20px;
    margin: 5px 0;
    border-radius:5px;
    /* background: #eee; */
    cursor: pointer;

}



.y-icon{
    width: 70px;
    height: 70px;
    border-radius: 15px;
    background: #4E0BEF;
}

.y-s-icon{
    width: 40px;
    height: 40px;
    border-radius: 5px;

}
.y-texts-wrapper{
    margin-left: 20px;
    /* display: none; */
}

.y-normaltxt{
    width: 200px;

}
.y-menu-sublevel-1{
    display: none;
    position: absolute;
    margin-left: 84px;
    margin-top: 47px;
}

.y-menu-item-sublevel-1{
    display: flex;
    flex-direction:row;
    align-items: center;
    margin:0 0 10px 10px ;
}

@keyframes anim1{
    0% {width: 0;height: 0;opacity: 0;}
    50% {width: 250px;height: 250px;opacity: .5;}
    100% {width: 500px;height: 500px;opacity: 1;}
    
}

.y-content{
    width: 500px;
    height: 500px;
    top:20px;
    left:180px;
    padding:20px;
    color: #fff;
    background: #4E0BEF;
    position: fixed;
    display:none;
    text-align: center;
    animation: anim1 .1s ;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menu</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="main-menu" class="y-menu">
        <div class="y-menu-item" >
            <div class="y-icon"></div>
            <div class="y-texts-wrapper">
                <h4 class="y-headtxt">Some head text</h4>
                <p class="y-normaltxt">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                
            </div>
            <div class="y-menu-sublevel-1">
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed mollitia et labore sunt distinctio laboriosam numquam laborum doloribus ex animi at amet maiores, quaerat temporibus, exercitationem minima repellat quos eligendi!</div>
                    
                </div> 
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>

                </div>   
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>

                </div>                    
                
            </div>
            
        </div>
        <div class="y-menu-item">
            <div class="y-icon"></div>
            <div class="y-texts-wrapper">
                <h4 class="y-headtxt">Some head text</h4>
                <p class="y-normaltxt">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                
            </div>
            <div class="y-menu-sublevel-1">
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div> 
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>   
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>                    
            </div>
            
            
        </div>
        <div class="y-menu-item">
            <div class="y-icon"></div>
            <div class="y-texts-wrapper">
                <h4 class="y-headtxt">Some head text</h4>
                <p class="y-normaltxt">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                
            </div>
            <div class="y-menu-sublevel-1">
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div> 
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>   
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>                    
                
            </div>
        </div>
        <div class="y-menu-item">
            <div class="y-icon"></div>
            <div class="y-texts-wrapper">
                <h4 class="y-headtxt">Some head text</h4>
                <p class="y-normaltxt">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                
            </div>
            <div class="y-menu-sublevel-1">
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div> 
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>   
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>                    
                
            </div>
        </div>
        
        
    </div>
</body>
</html>