JQuery выбора этого ребенка

Question

<ul> 
    <li class="hoverMe"><div class="secret">Haha</div></li> 
    <li class="hoverMe"><div class="secret">Blabla</div></li> 
    <li class="hoverMe"><div class="secret">Tada</div></li> 
</ul> 

Secred дивы скрыты в CSS:

.secret { 
    display: none; 
} 

Я хочу, чтобы отобразить секретный ребенок «hoverMe» после зависания «hoverMe» (так что, когда пользователь наводит курсор ссылка номер один он видит «Haha», nubmer two «Blabla» и т. Д.).

Я пробовал этот код, и он не работает. Я пытался заменить «next» на «child (ren)» и т. Д., Но Нет. Любые идеи?

jQuery().ready(function() { 

       jQuery('.hoverMe').hover(function(){ 
        jQuery(this).next('.secret').Toggle(); 
       }); 
      }); 

Странная вещь (это) .children() переключает всех детей, но когда я пытаюсь (это) .children ('. Secret'), это ничего не делает.

Answer 1

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

Ответ:

$(this).children().children().show(); 

Answer 2

http://api.jquery.com/children/

jQuery(this).children('.secret')[0] 

Ах ты пробовал. неважно.

Answer 3

• Использование children.
• toggle необходимо начинать с небольшой буквы.
• Внимание: Вам нужно другое "visible" содержание в элементе списка. В противном случае это займет , а не пробел, и вы ничего не можете навестить. По крайней мере, вам нужно будет добавить  . Как вы можете видеть в демо, я добавил их. Если вы удалите его, он больше не будет работать.

Так оно и должно быть:

jQuery('.hoverMe').hover(function(){ 
    jQuery(this).children('.secret').toggle(); 
}); 

Ваш готовый обработчик тоже неправильно, должно быть:

jQuery(document).ready(function() { 
    //... 
}); 

DEMO

Answer 4

hover() может связать два обработчика:

$('.hoverMe').hover(function(){ 
    $(this).children().show(); 
}, function(){ 
    $(this).children().hide(); 
}) 

или

$('.hoverMe').hover(function(){ 
    $(this).find('.secret').show(); 
}, function(){ 
    $(this).find('.secret').hide(); 
}) 

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

$('.hoverMe').hover(
    $(this).find('.secret').toggle(); 
) 

Answer 5

$(function(){ 
    $("ul li.hoverMe").hover(function(){ 
     $(this).children("div.secret").show(); 
    }, 
    function(){ 
     $(this).children("div.secret").hide(); 
    }); 
}); 

Answer 6

jQuery().ready(function() { 
       jQuery('.hoverMe').hover(function(){ 
        jQuery(this).children('.secret').**t**oggle(); 
       }); 
      }); 

JS является чувствительным к регистру

Answer 7

Ваши .hoverme s пустые (имеют высоту 0), когда .secret не отображается, поэтому не на что наплевать.

Вы должны будете использовать visibility: hidden/visibility: visible вместо

.secret { 
    visibility:hidden; 
} 

jQuery().ready(function() { 
    $(".hoverMe").hover(function() { 
    $(this).find(".secret").css("visibility", "visible"); 
    }, function() { 
    $(this).find(".secret").css("visibility", "hidden"); 
    }); 
}); 

Пример: http://jsfiddle.net/bM7f2/