javascript - 当我点击主菜单时，子菜单应该在 php 中突出显示

Question

我尝试了很多天，但没有结果请帮助我，当我点击主菜单时，子菜单应该在 php 中突出显示。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#cssmenu a').each(function (index) {
            console.log(this.href);
            if (this.href.trim() == window.location) {
                //check if 1st level, then below condition
                //if(this.class() != "has-parent")
                //{
                // $(this).addClass("active");
                //} 
                //if not first level, assign active to parent of this
                //if(this.class()= "has-parent")
                //{
                $(this).addClass("active");
                //}     
            }
        });
    });
</script>
<style>
    .active {
        background: #4FA9E4;
        color: #FFF;
        display: block;
    }
</style>
<div id="cssmenu">
    <ul>
        <li class="has-sub"><a href="company.php">Company</a> 
            <ul>
                <li class="has-parent"><a href="a.php">a</a>
                </li>
                <li><a href="b.php">b</a>
                </li>
            </ul>
        </li>
        <li class="has-sub"><a href="patners.php">Patners</a> 
            <ul>
                <li><a href="c.php">c</a>
                </li>
                <li><a href="d.php">d</a>
                </li>
            </ul>
        </li>
        <li><a href="contactus.php">Contact Us</a>
        </li>
    </ul>
</div>

Answer 1

您应该处理click 事件或您感兴趣的其他事件，并在事件处理程序中切换类。

$(document).ready(function () {
    $('#cssmenu ul ul a').click(function (e) {
        //e.preventDefault();
        $(this).parents('li.has-sub').find('>a').toggleClass('active');
    });
});

检查 jsFiddle example .