使用jQuery時，菜單的隱藏部分不會顯示

Question

請幫我解決這個問題。 我有這種導航：

<nav class="navigation"> 
       <ul class="nav-items"> 
       <li class="nav-items__item"><a href="index.html">Главная</a></li> 
       <li class="nav-items__item"><a href="about.html">Обо мне</a></li> 
       <li class="nav-items__item nav-items__item_on-hover"><a href="#">Услуги</a></li> 
       <li class="nav-items__item nav-items__item_no-margin"><a href="contact.html">Контакты</a></li> 
       </ul> 
       <ul class="nav-sub-items"> 
       <li class="nav-items__item nav-items__item_sub"><a href="index.html">Саск-Политех</a></li> 
       <li class="nav-items__item nav-items__item_sub"><a href="about.html">Школы</a></li> 
       <li class="nav-items__item nav-items__item_sub"><a href="#">Курсы и кемпы </a></li> 
       </ul> 
      </nav> 

的事情是，ul.nav子項默認是隱藏的。當徘徊在li.nav-items__item nav-items__item_on-hover我想.nav-子項目顯示出來。只是經典。但事情是，我寫了一些jQuery，根本不起作用。有人可以幫幫我嗎？

來了JQ：

$(function(){ 
    $('.nav-items__item_on-hover').hover(function(){ 
    $(this).find('.nav-sub-items').show('fast'); 
    }, function(){ 
    $(this).find('.nav-sub-items').hide('fast'); 
    }); 
}); 

Answer 1

你可以試試這個

JsFiddle Example

將ul元素中li所以如果你有多個隱藏sub menu它可以顯示這一點。

$(function(){ 
 
    $('.nav-items__item_on-hover a').hover(function(){ 
 
    $(this).next('.nav-sub-items').show('fast'); 
 
    }, function(){ 
 
    $(this).next('.nav-sub-items').hide('fast'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<nav class="navigation"> 
 
    <ul class="nav-items"> 
 
\t \t <li class="nav-items__item"><a href="index.html">Главная</a></li> 
 
\t \t <li class="nav-items__item"><a href="about.html">Обо мне</a></li> 
 
\t \t <li class="nav-items__item nav-items__item_on-hover"> 
 
\t \t \t <a href="#">Услуги</a> 
 
     <ul class="nav-sub-items" style="display:none"> 
 
\t \t \t \t <li class="nav-items__item nav-items__item_sub"> 
 
\t \t \t \t <a href="index.html">Саск-Политех</a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="nav-items__item nav-items__item_sub"> 
 
\t \t \t \t \t <a href="about.html">Школы</a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="nav-items__item nav-items__item_sub"> 
 
\t \t \t \t <a href="#">Курсы и кемпы </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li class="nav-items__item nav-items__item_no-margin"> 
 
\t \t \t <a href="contact.html">Контакты</a> \t \t \t \t 
 
\t \t </li> 
 
    </ul> 
 
</nav>

Answer 2

如果它總是要顯示/隱藏相同的列表，只需出示與類名/隱藏它，如下圖所示：

$(function(){ 
$('.nav-items__item_on-hover').hover(function(){ 
    $('.nav-sub-items').show('fast'); 
    }, function(){ 
    $('.nav-sub-items').hide('fast'); 
    }); 
}); 

Answer 3

這是因爲你正在分類你的元素而不是鏈接本身。在移動類到<a>標籤，然後簡單地做到這一點，它應該工作：

$('a.nav-items_item_on-hover').hover(function() { 
    $('.nav-sub-items').fadeIn(); 
}, function() { 
    $('.nav-sub-items').fadeOut(); 
}); 

jsFiddle

爲了保持切換導航模塊活躍，你可以在.on('mouseleave')事件附加到整個容器。當您將鼠標移離容器時，導航將會再次消失。

例子：

$('a.nav-items_item_on-hover').hover(function() { 
    $('.nav-sub-items').fadeIn(); 
}); 

$('.navigation').on('mouseleave', function() { 
    $('.nav-sub-items').fadeOut(); 
}); 

jsFiddle

我希望這有助於。