Question

我一直在寻找解决问题的方法，但似乎没有一种方法可以按我想要的方式工作。如果您当前在该页面上，我需要jQuery自动将类“active”添加到主li以及子li。

第一个代码块是简单的结构，第二个代码块是我在“billing_forecast.php”页面上需要查看的方式。

<aside id="sidebar">
<!--| MAIN MENU |-->
        <ul id="side-menu" class="side-menu">
            <li>
                <a href="index.php">
                    <i class="zmdi zmdi-home"></i>
                    <span>Home</span>
                </a>
            </li>
            <li class="sm-sub sms-bottom">
                <a href="">
                    <i class="zmdi zmdi-money zmdi-hc-fw"></i>
                    <span>Billing</span>
                </a>
                <ul>
                    <li><a href="billing_stats.php">Statistics</a></li> 
                    <li><a href="billing_forecast.php">Revenue Estimator</a></li>                                                              
                </ul>
            </li>                                                                        
        </ul>
</aside>

<aside id="sidebar">
<!--| MAIN MENU |-->
        <ul id="side-menu" class="side-menu">
            <li>
                <a href="index.php">
                    <i class="zmdi zmdi-home"></i>
                    <span>Home</span>
                </a>
            </li>
            <li class="active sm-sub sms-bottom">
                <a href="">
                    <i class="zmdi zmdi-money zmdi-hc-fw"></i>
                    <span>Billing</span>
                </a>
                <ul>
                    <li><a href="billing_stats.php">Statistics</a></li> 
                    <li class="active"><a href="billing_forecast.php">Revenue Estimator</a></li>                                                              
                </ul>
            </li>                                                                        
        </ul>
</aside>

Answer 1

以下是我提出的一个例子：

<ul id="side-menu" class="side-menu">
    <li>
        <ul>
            <li><a href="/test/">Link</a></li>
        </ul>
    </li>
</ul>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var path_name = window.location.pathname;

    if( $('.side-menu a[href="'+path_name+'"]').length ){
        $('.side-menu a[href="'+path_name+'"]').parent('li').addClass('active');
        $('.side-menu a[href="'+path_name+'"]').parent('li').parent('ul').parent('li').addClass('active')
    }

});
</script>

自动将类加到Subchild＆amp;父LI用jQuery

1 个答案: