使用jquery替换li的活动类

时间:2014-09-19 18:06:11

标签: javascript jquery treeview

当我点击树视图时,其他树视图需要关闭,尝试分配但无法解决它,任何人都可以帮助我。

http://7revolution.com/captain/captain/empty.html



$('.sidebar-menu .treeview').on('click', function(){
            if($(this).hasClass("active")) {
				$('.sidebar-menu').find('.treeview .treeview-menu').removeClass('active');
				$(this).find(".treeview.active").removeClass("active");
				e.preventDefault();
            }
            else{
				$('.sidebar-menu').find('.treeview-menu').attr('display', 'block');
                }

<ul class="sidebar-menu">
                        <li class="active">
                            <a href="index.html">
                                <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                            </a>
                        </li>
                        <li>
                            <a href="pages/widgets.html">
                                <i class="fa fa-th"></i> <span>Widgets</span> <small class="badge pull-right bg-green">new</small>
                            </a>
                        </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>
                    </ul>
&#13;
&#13;
&#13;

当我点击树视图时,需要关闭其他树视图,尝试分配但无法解决它可以请任何人帮助我。 当我点击树视图时,其他树视图需要关闭,尝试分配,但无法解决它,任何人都可以帮助我。

2 个答案:

答案 0 :(得分:0)

这可能会有所帮助:http://jsfiddle.net/qh8vz4y4/

JS

$('.sidebar-menu .treeview').on('click', function () {
    $(this).addClass('active');
    $('.treeview').not(this).removeClass('active');
});

CSS

.active .treeview-menu {
    display: block;
}
.treeview-menu {
    display: none;
}

答案 1 :(得分:0)

试试这个:

使用Javascript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
  $('.sidebar-menu .treeview').on('click', function () {
    $('.treeview').removeClass('active');
    $(this).addClass('active');  
  });
});
</script>

CSS:

<style>
    .sidebar-menu .treeview-menu{ display: none; }
    .active .treeview-menu {
         display: block;
     }

     .treeview-menu {
         display: none;
     }
</style>