Jquery выдвигается вверх-вниз при наведении курсора на меню при загрузке новой страницы

Question

Я борюсь с преобразованием меню из mootools в jquery. Есть несколько причин, по которым мне нужно переключить среду js, и мне здесь нужна помощь, потому что я новичок в jquery.

первая рабочая версия mootools на сайте: http://www.kieleconomcis.de

Как вы можете видеть, меню перемещается вверх при наведении, открывает подменю, а остается на , когда вы нажимаете на ссылку и загружаете страницу.

Теперь, когда мне нужно преобразовать это в JQuery, я также хочу иметь возможность контролировать высоту каждого меню в отдельности, так что это а) больше похоже на гистограмму и б) я могу разместить 4 подменю:)

Я играл, копировал и вставлял, пробовал и ошибался и в итоге получил скрипку здесь.

моя проблема - я полагаю, что у меня есть $('div.nav_body').hide();, но я должен сказать ему, что он должен игнорировать эффект, если элемент до него имеет id="visible"

Вот часть кода, чтобы вы могли увидеть, что мне нужно для запуска:

    <h4 id="visible">Über uns</h4>
        <div id="nav2-body" class="nav_body">

спасибо за любые объявления.

Answer 1

Использование селектора :not() и :has() работает:

$('div.nav_container:not(:has(#visible)) .nav_body').hide();

Также работает метод filter():

$('div.nav_body').filter(function () {
    return !$(this).prev().is("#visible");
}).hide();

Или используйте .not() для удаленияодно подменю из скрываемых предметов:

$('div.nav_body').not($("#visible").next()).hide();

Я проверил все три в вашей скрипке.Хотя я не могу сказать, какой мне нравится больше всего.

Answer 2

Вы можете проверить, если его родитель h4 имеет установленный идентификатор видимым

if ($('div.nav_body').parent('h4').attr('id') == 'visible')