javascript - ul li selector doesn't work -

javascript - ul li selector doesn't work -

i have issue using jquery. have content have become visible when click on ul li in navigation.

but i'm missing something, when click, nil happens. not sure why happens. please take @ provided fiddle near bottom

here code:

$(document).ready(function(){ $("ul.topnav > li.one").click(function() { $('.content').hide(500).fadeout(400); if ($(this).next().is(':hidden') == true) { $(this).next().show(400).fadein(500); } }); $('.content').hide(); }); class="lang-html prettyprint-override"><ul class="topnav"> <li class="one"><a href="#">test</a></li> <li>second</li> </ul> <div class="content">some content here</div>

here fiddle http://jsfiddle.net/2pbge/

here go

http://jsfiddle.net/mc92m/1/

$(document).ready(function(){ $("li.one").on("click", function() { $('.content').fadeout(400); if ($('.content').is(':hidden')) { $('.content').fadein(500); } }); $('.content').hide(); });

when used .next() targeting sec li, not content div nil shows or hides. removed .hide , .show have fade in/out

if want utilize .next() have

$(document).ready(function(){ $(".topnav").on("click", function(e) { if( $(e.target).parent().is('li.one') ) { $(this).next().toggle(); } }); $('.content').hide(); });

javascript jquery