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

标签 javascript html css bootstrap-4

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

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

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

我试过“使用 bootstrap 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>

最佳答案

我有以下使用纯 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>

关于javascript - 内容丰富的按钮折叠成图标并显示导航选项卡内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52415178/

上一篇：javascript - 如何使用 css/html 或 javascript 为灰度图像添加颜色？

下一篇：jquery - Bootstrap4 jQuery 横向动画

相关文章：

javascript - 单击任何提交表单按钮都没有任何反应。这是为什么？

javascript - 如何在js文件中使用backgroundFilter而不是css而不出现错误

javascript - 在 javascript 中检索页面的源代码

javascript - prop-types 在 React Native 应用程序中不起作用

javascript - 印象.js : CSS3 select one id within another

javascript - svg 外部对象中的 Canvas 不应用转换

javascript - tabindex命令效率不高？

javascript - 当 fadeToggle() 永远淡出元素时？

JavaScript 树/树网格库

javascript - 需要一种在 copyToClipboard 中添加换行符的方法

©2024 IT工具网  联系我们