如何使用HTML CSS Bootstrap創建側邊欄菜單和可點擊的子菜單？

Question

這是我的側邊欄菜單代碼的一部分。我想創建儀表板並在屏幕左側下拉菜單。 當我繼續前進時，不顯示它的子菜單。 （我想點擊）

  <div class="navbar-default navbar-right sidebar">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav-fall">
                        <li class="charj"><a href="">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a>
                            <ul class="nav-second-level">
                                <li><a href="">name</a></li>
                                <li><a href="">price</a></li>
                            </ul>
                        </li>

                        <li><a href="">one</a></li>
                        <li><a href="">two</a></li>
                        <li><a href="">three</a></li>
                    </ul>

                </div>
            </div>

<!------css----->

.sidebar .fa.arrow:before {
content: "\f105";
}
.sidebar .nav-second-level {
  display: none;
}
.sidebar .nav-fall .charj a:hover .nav-second-level {
  display: block;
}

Answer 1

下面有兩個例子。 第一個使用懸停，第二個使用單擊事件。

 .sidebar .fa.arrow:before { content: "\\f105"; margin-left: 3px; } .nav-second-level { display: none; } .sidebar .nav-fall li:hover .nav-second-level { display: block; } 

 <div class="navbar-default navbar-right sidebar"> <div class="sidebar-nav navbar-collapse"> <ul class="nav-fall"> <li class="charj"><a href="">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a> <ul class="nav-second-level"> <li><a href="">name</a></li> <li><a href="">price</a></li> </ul> </li> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> </div> </div> 

 $(document).on("click", ".charj", function() { $(this).find("ul").show(); }) 

 .sidebar .fa.arrow:before { content: "\\f105"; margin-left: 3px; } .nav-second-level { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar-default navbar-right sidebar"> <div class="sidebar-nav navbar-collapse"> <ul class="nav-fall"> <li class="charj"><a href="#">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a> <ul class="nav-second-level"> <li><a href="">name</a></li> <li><a href="">price</a></li> </ul> </li> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> </div> </div>