Как я могу написать эту строку меню в jQuery, чтобы вкладки оставались в состоянии наведения? - PullRequest
Новая
       31

Как я могу написать эту строку меню в jQuery, чтобы вкладки оставались в состоянии наведения?

0 голосов
/ 10 ноября 2011

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

Вот мой JQuery: 

$('.js-tab').hover(function(){
    $(this).css('background-color', 'black').css('color', 'white').children('.js-icon').css('background-position', '0px -65px');
},function(){
    $(this).css('background-color', 'white').css('color', 'black').children('.js-icon').css('background-position', '0 0');
});

$('nav').hover(function(){
    $('.js-subitems').slideDown(150);
},function(){
    $('.js-subitems').slideUp(200);
});

.js-tab (s) - это все вкладки. При наведении их css изменяется, чтобы инвертировать цвет и выбрать перевернутую часть спрайта. «nav» - это все меню. Его размер определяется элементами внутри него, у него нет определенного стиля, я выбираю его вместо вкладок для подменю, чтобы подменю оставалось активным, когда вы наводите на него курсор.

Вот мой CSS: 

.js-subitems {
    background: rgba(0,0,0,.8);
    width: 539px;
    height: 170px;
    margin: 0 0 0 313px;
    border: 1px solid rgba(255,255,255,.5);
    border-top: 0px solid transparent;
    border-right: 1px solid rgba(0,0,0,.8);
    position: absolute;
    display: none;
    z-index: 7;
    padding: 15px;
    padding-top: 185px;
    color: white;
}

.js-icon{
    background-color:transparent;
    background-position:top left;
    background-repeat:no-repeat;
    position:absolute
}

.js-menu{
    float:left;
    width:570px;
    height: 340px;
    position:relative;
    margin-left:313px;
    border-left: 1px solid #CCC;
    z-index:10
}

.js-menu li{
    float:left;
    border-right:1px solid #CCC
}

.js-tab{
    background:#fff;
    display:block;
    overflow:hidden;
    position:relative;
    text-align:center;
    width:94px;
    height:170px;
    text-decoration:none;
    z-index:8
}

.js-tab h2{
    font-size:13px;
    font-weight:500;
    left:0;
    position:absolute;
    top:120px;
    width:97px;
    text-decoration:none
}

ПРИМЕЧАНИЕ. Хотя цвет фона можно изменить без использования javascript, я стараюсь сохранить все это в одном месте. Я уменьшу это позже, сжатие не важно в данный момент.

Что мне нужно - это добавить jQuery, чтобы при перемещении курсора из вкладки в это подменю вкладка, из которой вы переместились, оставалась выделенной. Затем, при переходе из этого подменю обратно на вкладку в строке меню, выбирается вкладка tat.

Ответы [ 2 ]

2 голосов
/ 10 ноября 2011

Я думаю, что связывание события hover только с li должно работать: 

$('#js-menu li).hover(function(){
    $(this).find('.js-tab').css('background-color', 'black').css('color', 'white').children('.js-icon').css('background-position', '0px -65px');
    $(this).find('.js-subitems').slideDown(150);
},function(){
    $(this).find('.js-tab').css('background-color', 'white').css('color', 'black').children('.js-icon').css('background-position', '0 0');
    $(this).find('.js-subitems').slideUp(200);
});

Это вызовет оба изменения, которые вам нужны. Тем не менее, я бы также поместил каждый список подпунктов в li, например: 

<li data-hovercolor="#fff">
    <a href="/" class="js-tab">
    <h2 data-type="mText" class="js-item">Home</h2>
    <span data-type="icon" class="js-icon js-icon-home"></span>
    </a>
    <div class="js-subitems">
        Testing the text.
    </div>
</li>

Таким образом, поскольку вложенные элементы являются частью родительского li, родительский li будет сохранять эффект наведения при наведении курсора на вложенные элементы.

РЕДАКТИРОВАТЬ: После некоторого обсуждения, новое решение было необходимо. Я уверен, что это должно работать для того, что вам нужно: http://jsfiddle.net/jackrugile/SkhqF/

Изменяет длительность в зависимости от того, находится ли ul над или нет, и применяет небольшой setTimeout для обработки анимации при выходе из ul. Спасибо ответу @ GregL за вдохновение.

1 голос
/ 10 ноября 2011

Вот мой полностью непроверенный твик к javascript @ jackrugile.Если ничего другого, это может дать вам некоторые идеи.Порядок операторов может нуждаться в исправлении.

РЕДАКТИРОВАТЬ: Новый подход: вместо этого установите активное состояние на содержащий элемент <nav>.Код обновлен.

РЕДАКТИРОВАТЬ 2: Новый подход: проверьте, есть ли уже другое расширенное подменю, и если да, пропустите анимацию.Убрана идея класса <nav>, я не думаю, что она позволила бы анимацию. 

$('#js-menu li').hover(function(){
    $(this).find('.js-tab').css('background-color', 'black').css('color', 'white').children('.js-icon').css('background-position', '0px -65px');
    var duration = 150;
    if ($('.js-subitems:visible').length) // if another tab active then show it immediately
        duration = 0;
    $(this).find('.js-subitems').slideDown(duration);
},function(){
    $(this).find('.js-tab').css('background-color', 'white').css('color', 'black').children('.js-icon').css('background-position', '0 0');
    var duration = 200;
    if ($('.js-subitems:visible').length) // if another tab active then hide it immediately
        duration = 0;
    $(this).find('.js-subitems').slideUp(duration);
});
...