Меню Css, не скрывайте текущую связь меню на парение

Здесь я сделал пример своего меню jsfiddle. Таким образом, у меня есть горизонтальное меню с, опускаются, но в чем я нуждаюсь, - на грузе страницы, сначала литий должен быть расширен (это не твердо), и когда я толплюсь на любом другом элементе, это должно показать расширенное содержание тока (и если я mouseleave текущий элемент должен быть расширен).

Это - ситуация, когда я толплюсь на Item2 и mouseleave Item2 , это должно остаться как это:

Item1       Item2          Item3
            |||||
subItem2.1  subItem2.2 subItem2.3

ОБНОВЛЕНИЕ:

i managed to do it, but with exception, here is the link on JSFiddle

Его работы как я хотел, но когда я нажимаю на связь Item1 или Item2 , init() функция, называют, и Item1 , активными снова, я должен так или иначе установить активную связь - щелкнул один,

например, если я нажал Item3 связь, это перенаправляет меня к странице Item3, и эта связь активна в меню. (весь код по Jsfiddle)

5
nl ja de
я знаю, возможно я должен добавить некоторый класс, чтобы ток литий элемент и сделать некоторый материал с ним
добавлено автор Peter Popelyshko, источник
обновленный мой вопрос
добавлено автор Peter Popelyshko, источник
Вы can' t контроль mouseleave с css
добавлено автор Morpheus, источник
Посмотрите на это скрипка, возможно, it' помощь ll
добавлено автор MadCom, источник

3 ответы

Если я понимаю ваш вопрос правильно, проблема состоит в том, что необходимо вызвать init функцию, чтобы изменить все, но в то же время вы устанавливаете там item1 как ток; и это не в порядке, если вы только что нажали link2.

Если думают, что ваше решение должно быть, чтобы почти удалить весь код init. Все это может быть сделано в стилях css, упростив много вашего кода.

вы устанавливаете активный в пункты. (Вы уже делаете это в якорях, сделайте это в литии). Затем поместите всю гостиницу стилей появления css, и ваш сценарий уменьшается.

не должны устанавливать активный на подпунктах. можно установить правила как li.active литий; то есть, литий, который является потомком активного лития.

Как только вы делаете все это, можно избежать init funcion в целом.

Добавленная скрипка

I have changed that in the updated fiddle

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

Теперь сценарий справедлив

$(document).ready(function() {
    $("#menu_item ul.menu li.expanded").mouseover(function(){
        var previous = $('.current');
        previous.removeClass('current');          
        $(this).addClass('current');
    });
});

Я просто удаляю ток из предыдущего текущего элемента и добавляю его к новому.

Начальный выбор находится только в повышении

<div id="menu_item">
    

And the new CSS rules are:

#menu_item > ul.menu > li.current  {
    background-color: orange;
}
#menu_item ul.menu li ul {
    display: none;
}
#menu_item ul.menu li.current ul {
    display: block;
}
6
добавлено

Я думаю, что, возможно, URL, предназначающийся для активного государства, мог бы быть чем-то, чем вы будете интересоваться. Можно добраться, текущий путь с JavaScript, используя window.location.pathname . Можно свериться с jQuery, используя что-то как:

$(".first a[href=" + window.location.pathname + "]").addClass('active');

Это добавит активный класс ко всем якорям в .first , у которых есть тот же самый href признак как текущий путь. Вы, возможно, должны урезать ведущий разрез.

2
добавлено

вы должны, делая изменения в вашем стиле, чем, может работать правильно.

ul.menu li.expanded ul {
  position: relative;
  display: block;
  top: 20px;
  background-color: orange;
}
2
добавлено
у меня есть тот же самый стиль css, но с положение: абсолютный мне нужно это, возможно вы не понимаете моего вопроса, каждый раз, когда я нажимаю на ссылку jQuery , готовый вызов функции мой init() функция, которые устанавливают current_style к первому пункту, но по щелчку я должен установить этот стиль в элемент, по которому щелкают, что-то как этот
добавлено автор Peter Popelyshko, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)