当我点击子菜单父菜单应该突出显示答案

【问题标题】：When i click on child menu parent menu should highlight当我点击子菜单父菜单应该突出显示
【发布时间】：2014-02-19 15:22:01
【问题描述】：

当我们点击子菜单时，父菜单应该突出显示。请检查我的 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>

【问题讨论】：

你能把你的代码粘贴到JSfiddle吗？这样我们调试你的代码可能更容易。

标签： javascript php html css

【解决方案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>

【讨论】：

【解决方案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。

【讨论】：

我没有得到我想要的确切答案请任何人通过提供正确的代码来帮助我，我首先给出的代码只是突出显示正在单击的内容，但是当我单击子菜单主时我想要菜单应该突出显示，请帮助

【解决方案3】：

添加点击功能

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

示例here

【讨论】：