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

时间：2018-09-19 22:48:57

标签： javascript html css bootstrap-4

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

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

然后，当按下“子按钮”时，将显示一个内容区域。

我尝试使用“带有引导程序4的垂直对齐的制表符”，但我坚持使用：

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

如下图

Goal

我正在使用：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>

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题