首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Bootstrap 4导航菜单

Bootstrap 4导航菜单
EN

Stack Overflow用户
提问于 2018-03-04 17:08:46
回答 1查看 77关注 0票数 1

我有个问题。我有一个Bootstrap 4菜单:

代码语言:javascript
复制
<div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <img class="pic" src="pic.jpg" style="float: left; height:15em alt="gym logo">  
                </li>
                <li class="space"> NO TEXT</li>
                <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>

                <li class="nav-item">
                    <a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1"> Reports &nbsp; <i class="fas fa-angle-double-down"></i></a>
                    <div class="collapse fade" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-3 nav">
                            <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Orders</a></li>
                           <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Customers</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>    
        </div>

默认情况下,它是折叠的。当我点击Orders或Customers菜单时,如何使其展开?

谢谢!

EN

回答 1

Stack Overflow用户

发布于 2018-03-04 17:36:44

collapse类中添加show类。

代码语言:javascript
复制
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <img class="pic" src="pic.jpg" style="float: left; height:15em alt="gym logo">  
                </li>
                <li class="space"> NO TEXT</li>
                <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>

                <li class="nav-item">
                    <a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1"> Reports &nbsp; <i class="fas fa-angle-double-down"></i></a>
                    <div class="collapse fade show" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-3 nav">
                            <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Orders</a></li>
                           <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Customers</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>    
        </div>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49093758

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档