MouseOver удалить класс MouseOut восстановить класс - PullRequest
2 голосов
/ 30 апреля 2011

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

Так, например, у нас есть 4 пункта меню (Main 1, Main 2, Main 3, Main4).Два имеют подменю (Main 2, Main 4).Main 1 в настоящее время активен и имеет класс с именем active.Когда вы наводите курсор мыши на Main 2, подменю показывает, и у Main 2 есть класс hover и класс hilite при наведении курсора на его подменю, но теперь Main 1 возвращается к обычному запасу.Теперь вы отходите от навигации, и Main 1 возвращается к активному классу, а Main 2 выглядит как обычный

Теперь выполните те же настройки и сделайте Main 2 активным с отображением подменю по умолчанию.Когда вы наводите курсор на Main 1 Main 3 Main 4, подменю закрывается и активный класс на Main 2 удаляется, но когда вы уходите, он возвращается к активности и показывает свое подменю.Теперь, если вы наведите курсор мыши на Main 2 или на его подменю, класс никогда не изменится, он останется прежним.

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

Заранее спасибо и надеюсь, что мне помогут,
Тайлер

РЕДАКТИРОВАТЬ: вот ссылка на старый скрипт на jsfiddle здесь ОБНОВЛЕНО: 4/30/2011

1 Ответ

1 голос
/ 01 мая 2011

Обратите внимание, что это будет работать только на WordPress
Пожалуйста, оставляйте изменения в jsfiddle, а не в этом коде, если он не является основным

Хорошо, у нас наконец-то есть рабочее меню. Я сделал серьезный поиск и нашел решение. Теперь я не уверен, правильно это или нет, но работает так, как я хочу. Если кто-то хочет использовать его, не стесняйтесь. Он используется с WordPress, поэтому у меня есть функция для добавления нескольких строк кода, и я также опубликую это ниже.

Вот функция, которую я добавил в WordPress:

function additional_active_item_classes($classes = array(), $menu_item = false){

    if(in_array('current-menu-item', $menu_item->classes)){
        $classes[] = 'active active-menu';
    }
    return $classes;
}  
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );

Приведенный выше код предназначен для WordPress 3.0 +

Это добавит класс к текущему пункту меню

До сих пор в jQUERY я как бы добавлял кластер вещей, и, вероятно, есть способ объединить все это и заставить его работать как единое целое, но я не знаю, как это сделать, но плохо выложу код здесь и потом демоверсия к jsfiddle

Вот скрипт jQUERY, который я собрал вместе и добавит эффект, найденный в демоверсии:

Это добавляет класс .not-active ко всем родительским и не родительским элементам:

$('*:not(li) > ul#navbar > li').addClass('not-active');

Это добавляет класс .child-menu ко всем ul.sub-меню:

$('ul.sub-menu').children().addClass('child-menu');

Это добавляет класс .first-child к первому дочернему элементу в каждом подменю (добавлен для дополнительного стиля):

$('#navbar ul.sub-menu :first-child').addClass('first-child');

Это добавляет класс .last-child к последнему дочернему элементу в каждом подменю (добавлен для дополнительного стиля):

$('#navbar ul.sub-menu :last-child').addClass('last-child');

Это переключит класс .not-active в активном меню (удаляет .not-active для последнего скрипта ниже):

$("#navbar li.active").toggleClass("not-active");

Это переключит класс .not-active в активном дочернем меню (удаляет .not-active для последнего скрипта ниже):

$('#navbar ul.sub-menu li.active').toggleClass("not-active");

Это добавляет класс .parent-active, если присутствует .current-menu-parent:

$('ul#navbar li.current-menu-parent').addClass('parent-active');

Это добавляет класс .child-active, если li.current-menu-parent ul.sub-menu присутствует:

$('ul#navbar li.current-menu-parent ul.sub-menu').addClass('child-active');

* Это добавляет класс .hilite к родителю при наведении на его дочернее меню: *

$('#navbar li').hover(
    function() {
        $(this).parents('li').children('a').addClass('hilite');
    },
    function(){
        $(this).parents('li').children('a').removeClass('hilite');
    }
);

Удаляет класс .active активного меню при наведении на другие пункты меню, но не будет использоваться при наведении на активный или дочерний элемент активного элемента:

$('#navbar li.not-active').hover(
    function() {
        $('#navbar .active').removeClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').removeClass('parent-active child-active');
    },
    function() {
        $('#navbar .active').addClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').addClass('parent-active child-active');
   }
);

Так что теперь, когда у нас есть jQUERY, давайте введем css и html для справки.

Вот код:

/*Main position of menu*/
#navigation{float: left; margin: 5px 0 15px; padding: 0; position: relative;  width: 100%}
/*First UL tag for menu*/
ul#navbar{margin: 0; padding: 0; font-size: 96%; height: 20px; background: #009AD9}
/*Sets style for each LI tag and sets effects*/
#navbar li{float: left; list-style: none; text-transform: uppercase; font-weight: bold}
#navbar li a{display: block; text-decoration: none; color: #fff; padding: .24em .8em; line-height: normal}
#navbar li:hover a:hover, #navbar li a.hilite{background: #fff; color: #000}
#navbar li.active-menu a{background: #fff; border-top: 2px solid #B70F0F; padding-top: .063em; color: #666}
/*Sets parent active when child is active*/
#navbar li.parent-active a{background: #fff; color: #666}
/*Sets child-menu to not display when not-active*/
ul.sub-menu{display: none}
/*Sets the position of child menu using first-child (leave to avoid conflict with other style's)*/
#navbar li ul.sub-menu li.first-child{margin-left: -0.375em}
/*Sets child as visible on parent hover*/
#navbar li:hover ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child as visible when parent is active menu*/
#navbar li.active-menu ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child menu active when active item is inside of child menu*/
ul.child-active{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}
/*Sets style of child links*/
#navbar li ul.sub-menu li a{display: block; text-decoration: none; padding: 0 .5em; line-height: normal}
/*Sets various child link styles*/
ul.sub-menu li a{color: #666!important}
ul.sub-menu li a:hover{color: #000!important}
li.active-menu ul.sub-menu a{border-top: none!important; padding: 0 .5em!important}
#navbar li.current-menu-parent:hover ul.sub-menu{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}

Это должно быть довольно просто читать

Вот HTML:

<div id="navigation">
    <ul id="navbar">
        <li class="not-active"><a href="#">Main 1</a></li>
        <li class="active active-menu"><a href="#">Main 2</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 1</a></li>
                <li class="child-menu"><a href="#">Sub 2</a></li>
                <li class="child-menu last-child"><a href="#">Sub 3</a></li>
            </ul>
        </li>
        <li class="not-active"><a href="#">Main 3</a></li>
        <li class="not-active"><a href="#">Main 4</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 4</a></li>
                <li class="child-menu"><a href="#">Sub 5</a></li>
                <li class="child-menu last-child"><a href="#">Sub 6</a></li>
            </ul>
        </li>
    </ul>
</div>

Пожалуйста, не стесняйтесь использовать этот код, и если вы найдете более простой способ сгруппировать все эти сценарии, тогда, пожалуйста, сделайте.

Вы можете увидеть живое демо здесь на JSFIDDLE

...