突出显示菜单项并保持树打开

时间:2015-01-26 17:42:47

标签: php jquery

我是新编码并尝试打开菜单并突出显示用户是否在目标页面上。我使用JQuery Append尝试了几个变体,但没有一个正在运行。任何帮助从哪里开始。 这是菜单: menu.php

<div class="page-sidebar-wrapper">
        <div class="page-sidebar navbar-collapse collapse">
            <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
                <li class="sidebar-toggler-wrapper">
                    <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
                    <div class="sidebar-toggler">
                    </div>
                    <!-- END SIDEBAR TOGGLER BUTTON -->
                </li>
                <li class="start " id="parent">
                    <a href="javascript:;">
                    <i class="icon-home"></i>
                    <span class="title">Dashboard</span>
                    <span class="arrow "></span>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="index.php">
                            <i class="icon-bar-chart"></i>
                            Default Dashboard</a>
                        </li>
                        <li>
                            <a href="dash1.php">
                            <i class="icon-bulb"></i>
                            New Dashboard #1</a>
                        </li>
                        <li>
                            <a href="dash2.php">
                            <i class="icon-graph"></i>
                            New Dashboard #2</a>
                        </li>
                    </ul>
                </li>
                <li id="parent">
                    <a href="javascript:;">
                    <i class="icon-basket"></i>
                    <span class="title">Accounts and Contacts</span>
                    <span class="arrow "></span>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="accounts.php">
                            <i class="icon-home"></i>
                            Accounts</a>
                        </li>
                        <li>
                            <a href="contacts.php">
                            <i class="icon-basket"></i>
                            Orders</a>
                        </li>
                        <li>
                            <a href="my-tasks.php">
                            <i class="icon-tag"></i>
                            Order View</a>
                        </li>
                        <li>
                            <a href="ecommerce_products.php">
                            <i class="icon-handbag"></i>
                            Products</a>
                        </li>
                        <li>
                            <a href="ecommerce_products_edit.php">
                            <i class="icon-pencil"></i>
                            Product Edit</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- END SIDEBAR MENU -->
        </div>
    </div>

活跃的类应该是这样的。

<li class="active open">
    <a href="javascript:;">
        <i class="icon-settings"></i>
        <span class="title">Active Main Link</span>
        <span class="selected"></span>
        <span class="arrow open"></span>
    </a>
    <ul class="sub-menu">
        <li class="active">
            <a href="form_controls.html">
            Active Sub Main Link</a>
        </li>
        <li>
            <a href="form_icheck.html">
            iCheck Controls</a>
        </li>
    </ul>
</li>

感谢任何指导。

添加我尝试的脚本。

<script type="text/javascript">
    jQuery(document).ready(function($){
        var url = window.location.href;
        $('#parent li a[href="'+url+'"]').addClass('active open');
        $('.sub-menu li a[href="'+url+'"]').addClass('active');
    });
</script>

0 个答案:

没有答案