jquery - Bootstrap 在悬停时显示第 3 级菜单选项

Question

当我试图将鼠标悬停在侧边栏上时，我目前正在尝试对侧边栏的子菜单产生悬停效果。但我没有这样做，因为我试图在

元素中添加另一个，它没有显示新的子子菜单。我正在使用 bootstrap 3.0.2 版本和 AdminLte 模板以及 AdminLte 版本 1.2 css。

这是侧边条码:

  <ul class="sidebar-menu">
                        <li class="active">
                            <a href="index.php">
                                <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                            </a>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-th"></i> 
                                <span>Independent Upload</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Pahang</a></li>
                                <li><a href="pages/charts/flot.html"><i class="fa fa-angle-double-right"></i> Perak</a></li>
                                <li><a href="pages/charts/inline.html"><i class="fa fa-angle-double-right"></i> Perlis</a></li>
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Putrajaya</a></li>
                                <li><a href="pages/charts/flot.html"><i class="fa fa-angle-double-right"></i> Pulau Pinang</a></li>
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Negeri Sembilan</a></li>
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Melaka</a></li>
                                <li><a href="pages/charts/inline.html"><i class="fa fa-angle-double-right"></i> Kedah</a></li>
                                <li><a href="pages/charts/flot.html"><i class="fa fa-angle-double-right"></i> Kuala Lumpur</a></li>
                                <li><a href="pages/charts/inline.html"><i class="fa fa-angle-double-right"></i> Kelantan</a></li>
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Terengganu</a></li>
                                <li><a href="pages/charts/flot.html"><i class="fa fa-angle-double-right"></i> Selangor</a></li>
                                <li><a href="pages/charts/inline.html"><i class="fa fa-angle-double-right"></i> Johor</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-bar-chart-o"></i>
                                <span>Charts</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Morris</a></li>
                                <li><a href="pages/charts/flot.html"><i class="fa fa-angle-double-right"></i> Flot</a></li>
                                <li><a href="pages/charts/inline.html"><i class="fa fa-angle-double-right"></i> Inline charts</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-laptop"></i>
                                <span>UI Elements</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/UI/general.html"><i class="fa fa-angle-double-right"></i> General</a></li>
                                <li><a href="pages/UI/icons.html"><i class="fa fa-angle-double-right"></i> Icons</a></li>
                                <li><a href="pages/UI/buttons.html"><i class="fa fa-angle-double-right"></i> Buttons</a></li>
                                <li><a href="pages/UI/sliders.html"><i class="fa fa-angle-double-right"></i> Sliders</a></li>
                                <li><a href="pages/UI/timeline.html"><i class="fa fa-angle-double-right"></i> Timeline</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-edit"></i> <span>Forms</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/forms/general.html"><i class="fa fa-angle-double-right"></i> General Elements</a></li>
                                <li><a href="pages/forms/advanced.html"><i class="fa fa-angle-double-right"></i> Advanced Elements</a></li>
                                <li><a href="pages/forms/editors.html"><i class="fa fa-angle-double-right"></i> Editors</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-table"></i> <span>Tables</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/tables/simple.html"><i class="fa fa-angle-double-right"></i> Simple tables</a></li>
                                <li><a href="pages/tables/data.html"><i class="fa fa-angle-double-right"></i> Data tables</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="pages/calendar.html">
                                <i class="fa fa-calendar"></i> <span>Calendar</span>
                                <small class="badge pull-right bg-red">3</small>
                            </a>
                        </li>
                        <li>
                            <a href="pages/mailbox.html">
                                <i class="fa fa-envelope"></i> <span>Mailbox</span>
                                <small class="badge pull-right bg-yellow">12</small>
                            </a>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-folder"></i> <span>Examples</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/examples/invoice.html"><i class="fa fa-angle-double-right"></i> Invoice</a></li>
                                <li><a href="pages/examples/login.html"><i class="fa fa-angle-double-right"></i> Login</a></li>
                                <li><a href="pages/examples/register.html"><i class="fa fa-angle-double-right"></i> Register</a></li>
                                <li><a href="pages/examples/lockscreen.html"><i class="fa fa-angle-double-right"></i> Lockscreen</a></li>
                                <li><a href="pages/examples/404.html"><i class="fa fa-angle-double-right"></i> 404 Error</a></li>
                                <li><a href="pages/examples/500.html"><i class="fa fa-angle-double-right"></i> 500 Error</a></li>
                                <li><a href="pages/examples/blank.html"><i class="fa fa-angle-double-right"></i> Blank Page</a></li>
                            </ul>
                        </li>
                    </ul>

这是侧边栏的CSS代码:

.sidebar {
  margin-bottom: 5px;
}
.sidebar .sidebar-form input:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: transparent!important;
}
.sidebar .sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar .sidebar-menu > li {
  margin: 0;
  padding: 0;
}
.sidebar .sidebar-menu > li > a {
  padding: 12px 5px 12px 15px;
  display: block;
}
.sidebar .sidebar-menu > li > a > .fa,
.sidebar .sidebar-menu > li > a > .glyphicon,
.sidebar .sidebar-menu > li > a > .ion {
  width: 20px;
}
.sidebar .sidebar-menu .treeview-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar .sidebar-menu .treeview-menu > li {
  margin: 0;
}
.sidebar .sidebar-menu .treeview-menu > li > a {
  padding: 5px 5px 5px 15px;
  display: block;
  font-size: 14px;
  margin: 0px 0px;
}
.sidebar .sidebar-menu .treeview-menu > li > a > .fa,
.sidebar .sidebar-menu .treeview-menu > li > a > .glyphicon,
.sidebar .sidebar-menu .treeview-menu > li > a > .ion {
  width: 20px;
}

我想做的是当我将鼠标悬停在“Pahang”时，然后是一个新的子菜单。可以在 bootstrap 3.0.2 上执行吗？我对 bootstrap 框架还是个新手，所以我不太了解其中的高级标记。请指导我完成此操作。

Answer 1

这是一个侧边栏菜单的例子

HTML 结构:

<ul class="nav">
    <li><a href="#" data-toggle="collapse" data-target="#sub1">Link 4<b class="caret pull-right"></b></a>
        <ul class="nav collapse" id="sub1">
            <li><a href="#">Sub Link 1</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle">Sub Link 2<b class="caret-right pull-right"></b></a>
                    <ul class="nav dropdown-menu" id="subsub1">
                        <li><a href="#">Link 4.2.1</a></li>

二级菜单边距:

.sidebar-offcanvas .nav .nav.collapse,
.sidebar-offcanvas .nav .nav.collapsing {
    margin-left: 5%;
    background-color: #f8f8f8;
}

定位三级菜单并使其在悬停时出现:

.sidebar-offcanvas .nav .nav.collapse .nav {
    position: absolute;
    top: 0;
    left: 155px;
    z-index: 100;
    background-color: #f8f8f8;
}
.dropdown:hover .dropdown-menu {
    display: block;
}

然后我们需要为横向插入符号指定 css 以使其定位到右侧并右对齐:

.caret.pull-right,
.caret-right.pull-right {
    margin-top: 9px;
}
.caret-right {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-left: 4px solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

菜单外观:

Demo fiddle is here