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

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

2 голосов
/ 25 января 2010

У меня проблема с раскрывающимися списками jQuery. По сути, кнопка, раскрывающая выпадающий список, исчезает при его раскрытии. Вот код

HTML, включенный в навигацию 

<div id="header">
<div id="navHolder">
        <ul style="list-style: none;">
        <li><a href="#" class="navBtn">Travel Blog</a></li>
        <ul class="dropdown">
        <li><a href="#" class="navBtn">Destination</a>
            <ul class="sub_menu">
                 <li><a href="#">Item One</a></li>
                 <li><a href="#">Item Two</a></li>
                 <li><a href="#">Item Three</a></li>
            </ul>
        </li>
        </ul>
    <li><a href="#" class="navBtn">Map</a></li>
    <li><a href="#" class="navBtn">About</a></li>
    </ul>
</div>

Это JavaScript, генерирующий эффект выпадающего списка. 

$(function(){

var config = {    
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
     interval: 200,  // number = milliseconds for onMouseOver polling interval    
     over: doOpen,   // function = onMouseOver callback (REQUIRED)    
     timeout: 200,   // number = milliseconds delay before onMouseOut    
     out: doClose    // function = onMouseOut callback (REQUIRED)    
};

function doOpen() {
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
}

function doClose() {
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
}

$("ul.dropdown li").hoverIntent(config);

$("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

}); * +1011 *

А это CSS стилизация кнопок и выпадающего списка ... 

ul.dropdown                         { position: relative; list-style: none;}
ul.dropdown li                      { font-weight: bold;  list-style: none; zoom: 1;}
ul.dropdown a:hover                 { color: #CCC; }
ul.dropdown a:active                { color: #FFF; }
ul.dropdown li a                    { display: block; color: #FFF;}
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { color: #CCC; position: relative; }
ul.dropdown li.hover a              { color: #FFF; text-decoration: none;}
ul.dropdown ul                      { width: 180px; background: url(images/transBlack_bg2.png) repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; visibility: hidden; position: absolute; top: 45px; right: 60px; }
ul.dropdown ul li                   { font-weight: bold; font-size: 13px; color: #FFF; padding: 5px;}
ul.dropdown ul li a                 { width: auto; display: inline-block; } 
ul.dropdown ul li a:hover           { color: #111;}
ul.dropdown ul ul                   { left: 100%; top: 0; }
ul.dropdown li:hover > ul           { visibility: visible; }

Буду очень признателен за любые советы или ответы, большое спасибо за ваше время:)

1 Ответ

0 голосов
/ 25 января 2010

Проблема в том, что вы используете класс псевдоховер неправильно. Эта ссылка указывает, как правильно их использовать. Ваша проблема заключается в следующем (из ссылки): Примечание: a: hover ДОЛЖЕН идти после определения a: link и a: посещения в определении CSS, чтобы быть эффективными !! Таким образом, ваш стиль парения не ведет себя правильно. Если вы добавите эти строки (корректируете по желанию): 

ul.dropdown li.hover a:link {color:#999}
ul.dropdown li.hover a:visited {color:#999}

до этой строки: 

ul.dropdown li.hover a              { color: #FFF; text-decoration: none;}

будет работать как положено.

Редактировать: Кроме того, использование класса с именем hover вместе с псевдо-классом hover затрудняет расшифровку CSS. Я бы дал классу, чтобы вы создали другое имя, если это возможно.

...