Question

当我们点击子菜单时，父菜单应突出显示。请检查我的Javascript代码。我无法得到结果。这里我得到的结果只有主菜单突出显示。请帮帮我。谢谢你提前

<html>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#cssmenu a').each(function(index) {
            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;

    }

    <ul id="id">
    <body>
    <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>
    </body>
    </html>

Answer 1

您忘记关闭导致问题的样式标记。另外我添加了一些你忘记的其他标签，如doctype和head标签。验证您的文档http://validator.w3.org/，您将不会再遇到这些问题。

<!doctype html><html><head><title>test</title>
    <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>
</head><body>

    <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="#asd">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="index.php">d</a></li></ul>
            </li>

            <li><a href="contactus.php">Contact Us</a></li>
                </ul>
                </div>
</body></html>

Answer 2

这样的东西？

HTML：

<div id="cssmenu">
    <ul>
        <li class="has-sub"><a href="#">Company</a>

        <ul><li class="has-parent"><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        </ul>
        </li>
        <li  class="has-sub"><a href="#">Patners</a>
        <ul><li><a href="#">c</a></li>
        <li><a href="#">d</a></li></ul>
        </li>

        <li><a href="#">Contact Us</a></li>
            </ul>
            </div>

JS：

$(function(){
    $('#cssmenu li').click(function() {
        if ($(this).hasClass('has-parent')){
            var parent = $(this).closest('.has-sub');
            parent.attr('class', 'active');
        }
    });
});

样式：

    .active{
      background: #4FA9E4; color:#FFF;
}

请参阅此fiddle。

Answer 3

添加点击功能

 $('#cssmenu a').unbind('click').click(function(){
            $(this).addClass("active");
            return false;
    });

示例here

当我点击子菜单时，父菜单应突出显示

3 个答案: