javascript - Can't show content text from menu using jQuery -

i trying make submenu using jquery. idea when clicks on first menu submenu appears, when clicks submenu disappears , shows div information cant make work properly.

here html:

<ul id="menu">     <li>         <a href="#">item 1</a>         <ul id="submenu">             <li><a href="#" data-menu="show1">sub menu 1</a></li>             <li><a href="#" data-menu="show2">sub menu 2</a></li>         </ul>     </li> </ul> <div id="show1" class="content">lorem ipsum ad scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div> <div id="show2" class="content">ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. no mei ferri </div> 

and jquery:

$(document).ready(function () {     $('#menu li ').click(function () {         $('#submenu').fadetoggle();         $('.content').fadeout();     });     $('ul#submenu li a').click(function () {         var menu = $(this).data("menu");         $('#' + menu).fadein();     }); }); 

the idea simple, if menu clicked content divs must hide , submenu must toggle (show if hidden, hide if shown.) when submenu item clicked, submenu must hide , content div matching data attribute clicked must appear.

but, when click submenu item shows content moment disappears. idea on doing wrong?

here fiddle: https://jsfiddle.net/yab34zdw/

when click on submenu item, both of event handlers being fired. problem selectors:

$('#menu li ') captures submenu items, <li> tags descendants of menu. change selector $("#menu > li"), captures direct descendants (children), think in general better add classes, , use simpler selectors.

html

<ul id="menu">     <li class="menu-top-item>         <a class="menu-top-item-link" href="#">item 1</a>         <ul id="submenu">             <li class="menu-sub-item">                 <a class="menu-sub-item-link" href="#" data-menu="show1">sub menu 1</a>             </li>             <li class="menu-sub-item">                 <a class="menu-sub-item-link" href="#" data-menu="show2">sub menu 2</a>             </li>         </ul>     </li> </ul> 

javascript fiddle

$('.menu-top-item-link').click(function () {     $('#submenu').fadetoggle();     $('.content').fadeout();     return false; }); $('.menu-sub-item-link').click(function () {     var menu = $(this).data("menu");     $('#' + menu).fadein();     return false; });