Question

我想在三级下拉菜单中显示所有父项，以突出显示选择子项的时间。根据我的阅读和建议，这应该有效：

$(this).parents().addClass("selected");

但对我来说却没有。

我试过了两个：

$(this).parent().addClass("selected");

和

$(this).parents("li").addClass("selected");

但仍然没有。有人能看到我在这里做错了吗？你可以在http://portergroup.businesscatalyst.com/hyundai.html

看到它的实际效果

<!-- menu starts here -->
<div class="navBox">
<ul>
    <li><a href="#">SALES</a>
        <ul id="subnavlist" class="newWidth">
            <li><a href="#">NEW</a>
                <ul id="sub-subnavlist">
                    <li><a href="#">Hyundai</a></li>
                    <li><a href="#">Bomag</a></li>
                </ul>
            </li>
            <li class="subNavIndustry"><a href="#">INDUSTRIES SERVED</a>
                <ul class="navIndustries" id="sub-subnavlist">
                    <li><a href="#">Quarry and Mining</a></li>
                    <li><a href="#">Construction</a></li>                    
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>
<!-- menu ends here -->


$('.navBox li a').each(function(index) {
        if(this.href.trim() == window.location)
            //$(this).addClass("selected");  //this line works as far as highlighting the selected item
            $(this).parents().addClass("selected");  //this does not work
        });

Answer 1

使用parentsUntil（这里你会放到你想要的父母那里），例如，如果你想要所有的父母直到班级容器 - 你做

$(this).parentsUntil('.container').addClass("selected");

Answer 2

jquery选择器或addClass（）方法没有问题！问题是if(this.href.trim() == window.location)语句。它没有返回true，因此没有添加类。检查工作代码here this.href只返回＃而不是完整的URL。

Answer 3

使用location.href或window.location.href代替window.location：

    $('.navBox li a').each(function(index) {
        if(this.href.trim() === window.location.href) {
            $(this).parents().addBack().addClass("selected");
        }
    });

注意：

window.location是一个对象：

Location {replace: function, assign: function, ancestorOrigins: DOMStringList, origin: "http://portergroup.businesscatalyst.com", hash: ""…}

您可以采取的另一种方法是单行：

$('.navBox li a[href="' + location.href + '"]') .parents().addBack().addClass('selected');

Answer 4

我花了一点时间才得到答案，我不确定我应该发布这个，因为你已经有了答案，但我觉得这可以帮助你将来调试你的问题。

实质上，确保this.href.trim（）确实执行== window.location，并始终对JavaScript块使用花括号。虽然它不是必需的，但它肯定有助于保持代码清洁。

如果有疑问，我建议使用console.log（），但是对于代码片段而言，登录到真正的div更容易。

＆＃13;

$('.navBox li a').each(function(index) {
    if(this.href.trim() == window.location) {
        $("#log").append("Ok:" + window.location + " | " + this.href.trim() + "<br/>");
        $(this).parents("li").addClass("selected");
    }
    else {
        $("#log").append("No:" + window.location + " | " + this.href.trim() + "<br/>");
    }
});

＆＃13;

li.selected > a {background:red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- menu starts here -->
<div class="navBox">
<ul>
    <li><a href="#">SALES</a>
        <ul id="subnavlist" class="newWidth">
            <li><a href="#">NEW</a>
                <ul id="sub-subnavlist">
                    <li><a href="#">Hyundai</a></li>
                    <li><a href="http://stacksnippets.net/js">Bomag</a></li>
                </ul>
            </li>
            <li class="subNavIndustry"><a href="#">INDUSTRIES SERVED</a>
                <ul class="navIndustries" id="sub-subnavlist">
                    <li><a href="#">Quarry and Mining</a></li>
                    <li><a href="#">Construction</a></li>                    
                </ul>
            </li>
        </ul>
    </li>

</ul>
</div>
<p id="log"></p>
<!-- menu ends here -->

＆＃13;

http://jsfiddle.net/tdu2quw8/

。家长（）addClass（ “选择”）。不工作

4 个答案: