无法激活特别是ul li

时间:2015-10-09 06:31:19

标签: javascript jquery html5 dom

我的结构如下:

         <ul class="sidebar-menu">
            <li class="header">MAIN NAVIGATION</li>
            <li class="active treeview">
              <a href="#">
                <span>Dashboard</span>
              </a>
              <ul class="treeview-menu">
                <li class="active"><a href="index.php">Dashboard v1</a></li>
                <li><a href="index2.php">Dashboard v2</a></li>
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <span>Layout Options</span>
                <span class="label label-primary pull-right">4</span>
              </a>
              <ul class="treeview-menu">
                <li><a href="#">Top Navigation</a></li>
                <li><a href="#">Boxed</a></li>
                <li><a href="#">Fixed</a></li>
                <li><a href="#"> Collapsed Sidebar</a></li>
              </ul>
            </li>
         </ul>

我尝试的是

    $(".sidebar-menu ul li a").on("click", function() {
        $(".active treeview")
            .not($(this).parents('li'))
                .removeClass('active treeview');
        $(this)
            .parent()
                .addClass('active treeview')
                .find("ul.treeview")
                    .stop("true", "true")
                    .slideDown()
                    .addClass('active');
        $(this)
            .parent()
                .siblings()
                    .find("ul.treeview")
                        .stop("true", "true")
                        .slideUp()
                        .removeClass('active');
    });

这里的课程活动树视图&#39;将主菜单显示为活动,类active显示子菜单处于活动状态。

我尝试使用javascript删除所有其他类,这些类被删除但是在将类添加到特定li时它不起作用。当我点击某个菜单时,如何编写java脚本,表明子菜单和他的父菜单已被激活。

1 个答案:

答案 0 :(得分:0)

试试这个

  

适用于侧边菜单和树视图

    /** add active class and stay opened when selected */
var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
    return this.href == url;
}).parent().siblings().removeClass('active').end().addClass('active');

// for treeview
$('ul.treeview-menu a').filter(function() {
    return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").siblings().removeClass('active').end().addClass('active');