parent () также захватывает братьев и сестер

Question

В примере на следующей странице я бы хотел, чтобы «активный» класс применялся к родителю активной ссылки:

http://socalragdolls.com/jquerytest.html

<div id="topnav">
    <ul id="mainmenu">
        <li class="top" id="home"><a href="/">Home</a></li>
        <li class="top"><a href="kittens">Kittens</a>
            <ul id="mainmenu">
                <li><a href="caring">Caring for a Ragdoll</a></li>
                <li><a href="kittens">Current Litter</a></li>
                <li><a href="jquerytest.html">Future Litters</a></li>
                <li><a href="parents">Parents</a></li>
                <li><a href="pricing">Pricing</a></li>
                <li><a href="reserving">Reserving a Kitten</a></li>
            </ul>
        </li>
        <li><a href="about">About Us</a>
            <ul>
                <li><a href="about">Cattery</a></li>
                <li><a href="proprietor">Proprietor</a></li>
                <li><a href="testimonials">Testimonials</a></li>
            </ul>
        </li>
        <li class="last"><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

По сути, когда посетитель находится на странице (jquerytest.html), я хочу, чтобы родительский "Котята" также были активны.

Вот текущий jQuery:

<script>
    $("#topnav a").each(function() {
        if(this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname)
        $(this).parent('li').addClass('active');
    });
</script>

<script>
    $(document).ready(function() {
        $('li.active').parent().parent().addClass('active');
    });
</script>

Как видите, это выделяет всех братьев и сестер ребенка .active li вместе с родителем, чего я определенно не хочу.

Есть идеи?

Answer 1

Не все выбирает ..

Выбирает только родитель.Проблема заключается в вашем CSS-правиле для .active, которое стилизует все li (), и поскольку ul является дочерним по отношению к li, оно выглядит как все братья и сестры выбраны ).

Просто создайте правило css для .active ul{background-color:white;}

---

Если проблема связана с красной рамкой, а не с цветом фона, виновником является эта часть

$(document).ready(function() {
    $('li ul li.active').siblings().css('border', '1px solid red');
    $('li ul li.active').siblings().css('background-color', '#333');
});

но это слишком очевидно, чтобы быть реальной проблемой ..

Answer 2

Как говорит Павел, у целого li родителя есть фон, который инкапсулирует дочернего элемента ul.Один из способов избежать этого - использовать фоновое изображение, которое имеет такую ​​же высоту, как родительская ссылка, и не повторяется на оси у.

Answer 3

На самом деле это не подсветка братьев и сестер, а подсветка родителя li и всего содержимого внутри него.

Я бы вместо этого поместил активный класс в ссылку на котенка, или вы могли бы добавить другой классимя, как active-trail к родителю.

Answer 4

Я думаю, что ваш второй скрипт должен выглядеть следующим образом:

РЕДАКТИРОВАТЬ

$('li.active').closest("li").find("a").addClass('active');

Итак, мы только добавляем класс active к якору.Происходило то, что вы добавляете класс ко всему языку, включая детей.

Надеюсь, это поможет Cheers

Answer 5

Похоже, что вы применяете стиль ко всему ul, поэтому он «меняет» и всех своих потомков ... Возможно, вам придется сбросить background-color на ul с помощью CSS.