Функция js 'toggle' или 'hover'?

Question

Я не хочу использовать toggle, что мне нужно использовать, чтобы получить следующую структуру: nav, чтобы оставаться на месте, когда зависла главная ссылка?

Текущие ЯШ:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".downservices").hover(function(){ 
     $(".servicesdropped").toggle("fast"); 
    }); 
    }); 
</script> 

Sample page

(Обратите внимание, что, когда подменю появляется, я не могу нажать на ссылки, а подменю исчезает)

Answer 1

использовать как этот

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".downservices").hover(function(){ 
$(".servicesdropped").slideDown(); 
}); 
}); 
</script> 

для выключения меню исчезнуть используйте это

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".downservices").hover(
function(){ 
$(".servicesdropped").slideDown(); 
}, 
function(){ 
$(".servicesdropped").slideUp(); 
} 
); 
}); 
</script> 

Answer 2

Если вы не суетитесь о анимации и хотите использовать JQuery, вы можете переключить правило видимости CSS в классе.

$(document).ready(function() 

// Make sure the item is hidden initially, best to do 
// this in CSS. 
$(".servicesdropped").css("visibility", "hidden"); 

{ 
    $(".downservices").hover(function() 
    { 
     $(".servicesdropped").css("visibility", "display"); 
    }, 
    function() 
    { 
     $(".servicesdropped").css("visibility", "hidden"); 
    }); 
}); 

Использование visiblity означает, что элемент будет по-прежнему потребляет пространство, которое он делает в DOM, но не отображает убедившись, что структура и расположение других элементов, окружающих его остаются в такте. Недостатком является то, что анимации, такие как fadeIn() и fadeOut(), не будут работать.

Answer 3

Ваш HTML архитектура разметки меню должно нравится:

<ul> 
    <li class="downservices"><a href="#">GUYS</a> 
    <div class="servicesdropped" style="display: none;"> 
     <ul class="middle"> 
     <h3>Shirts &amp; Tanks:</h3> 
     <li><a href="#">MuSkull</a></li> 
     <li><a href="#">Bamboo Athletic Tank</a></li> 
     <li><a href="#">Thin Strap Tank</a></li> 
    </ul> 

    <ul class="right"> 
     <h3>Other Stuff:</h3> 
     <li><a href="#">Shorties</a></li> 
     <li><a href="#">Hoodies</a></li> 
     <li><a href="#">Socks</a></li> 
     <li><a href="#">Hats</a></li> 
    </ul> 
    </div> 
    </li> 
    <li><a href="#">products</a></li> 
    <li><a href="#">portfolio</a></li> 
    <li><a href="#">contact</a></li> 
</ul> 

И в сценарии использовать это:

$(document).ready(function(){ 
    $("li.downservices").hover(function() 
    { 
     $(this).find(".servicesdropped").slideDown("fast"); 
    }, 
    function() 
    { 
     $(this).find(".servicesdropped").slideUp("fast"); 
    }); 
});