Переключение элементов подменю jQuery

Question

Когда я пытаюсь переключить элемент SubMenu, элемент переключается, но меню первого уровня закрывается. Меню не должно скрываться, когда пользователь нажимает на элемент подменю. например, если вы нажмете на SSNIT и «основные сервисы», появится подменю, но элемент меню первого уровня будет закрыт. Нужен какой-то опыт для этого исправления? Здесь вы можете посмотреть код на JSFiddle http://jsfiddle.net/3aRSr/.

HTML:

 <div id="container"> 
      <div style="display: inline-block"> 
      <ul id="menu"> 
       <li><a href="">Home</a></li> 
       <li> 
       <a href="#">SSNIT</a> 
       <ul> 
        <li> 
        <a href="">About SSNIT</a> 
        </li> 
        <li> 
        <a href="/Pages/new-ssnit.aspx">New SSNIT</a> 
        </li> 
        <li> 
        <a href="">Board of Trustees</a> 
        </li> 
        <li> 
        <a href="#">Core Services</a> 
        <ul> 
         <li><a href="/">Membership</a></li> 
         <li><a href="/">Investments</a></li> 
         <li><a href="/">Benefits</a></li> 
         <li><a href="/x">Students Loan</a></li> 
        </ul> 
        </li> 
        <li> 
        <a href="/">Executive Committee</a> 
        </li> 
        <li> 
        <a href="">Mission and Vision</a> 
        </li> 
       </ul> 
       </li> 
       <li><a href="">Statistics</a></li> 
       <li><a href="">News</a></li> 
       <li><a href="">Resources</a></li> 
       <li> 
       <a href="#">Self Services</a> 
       <ul> 
        <li> 
        <a href="#">Benefit Application</a> 
        </li> 
        <li> 
        <a href="#">Employer Enrolment</a> 
        </li> 
        <li> 
        <a href="#">Member Enrolment</a> 
        </li> 
       </ul> 
       </li> 
       <li><a href="">FAQs</a></li> 
       <li> 
       <a href="#">Contact Us</a> 
       <ul> 
        <li> 
        <a href="/">Contact Information</a> 
        </li> 
        <li> 
        <a href="/">Customer Service Locations</a> 
        </li> 
        <li> 
        <a href="/">Telephone Directory</a> 
        </li> 
        <li> 
        <a href="/">SSNIT Locations Map</a> 
        </li> 
       </ul> 
       </li> 
      </ul> 
      </div> 

CSS:

 #menu, #menu2, #container { 
      width: 100%; 
      margin: 0; 
      padding: 1px 0 0 0; 
      list-style: none; 
      background: #DCDCDC; 
      } 

      #menu li, #menu2 li { 
       float: left; 
       padding: 0 0 0 0; 
       position: relative; 
       line-height: 0; 
      } 

      #menu a, #menu2 a { 
       float: left; 
       height: 25px; 
       padding-top: 0; 
       padding-bottom: 0; 
       padding-left: 10px; 
       padding-right: 10px; 
       color: #403E3F; 
       text-transform: uppercase; 
       font: bold 12px/25px Arial, Helvetica; 
       text-decoration: none; 
      } 

      #menu li:hover > a, #menu2 li:hover > a { 
       color: #fafafa; 
      } 


      #menu li a:hover, #menu2 li a:hover /* IE6 */ { 
       color: #fafafa; 
      } 

      #menu li:hover > ul, #menu2 li:hover > ul { 
       /*display: block;*/ 
      } 

      /* Sub-menu */ 

      #menu ul, #menu2 ul { 
       list-style: none; 
       margin: 0; 
       padding: 0; 
       display: none; 
       position: absolute; 
       top: 40px; /* louis: 50px */ 
       left: 0; 
       z-index: 99999; 
       background: #DCDCDC; 
      } 

       #menu ul ul, #menu2 ul ul { 
       top: 0px; 
       left: 195px; /* louis: 160px */ 
       } 

       #menu ul li, #menu2 ul li { 
       float: none; 
       margin: 0; 
       padding: 0; 
       display: block; 
       -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
       -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
       box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
       } 

       #menu ul li:last-child, #menu2 ul li:last-child { 
        -moz-box-shadow: none; 
        -webkit-box-shadow: none; 
        box-shadow: none; 
       } 

       #menu ul a, #menu2 ul a { 
       padding: 10px; 
       height: 10px; 
       width: 165px; 
       height: auto; 
       line-height: 1; 
       display: block; 
       white-space: nowrap; 
       float: none; 
       text-transform: none; 
       } 

       #menu ul a, #menu2 ul a /* IE6 */ { 
       height: 10px; 
       } 

       *:first-child + html #menu ul a, *:first-child + html #menu2 ul a /* IE7 */ { 
       height: 10px; 
       } 

       #menu ul a:hover, #menu2 ul a:hover { 
        background: #0186ba; 
       } 

       #menu ul li:first-child > a, #menu2 ul li:first-child > a { 
       } 

       #menu ul li:first-child > a:after, #menu2 ul li:first-child > a:after { 
        content: ''; 
        position: absolute; 
        left: 30px; 
        top: -10px; 
        width: 0; 
        height: 0; 
        border-left: 12px solid transparent; 
        border-right: 12px solid transparent; 
        border-bottom: 16px solid #DCDCDC; 
       } 

       #menu ul ul li:first-child a:after, #menu2 ul ul li:first-child a:after { 
       left: -10px; 
       top: 5px; 
       width: 0; 
       height: 0; 
       border-left: 0; 
       border-bottom: 12px solid transparent; 
       border-top: 12px solid transparent; 
       border-right: 16px solid #DCDCDC; 
       } 

       #menu ul li:first-child a:hover:after, #menu2 ul li:first-child a:hover:after { 
       border-bottom-color: #0186ba; 
       } 

       #menu ul ul li:first-child a:hover:after, #menu2 ul ul li:first-child a:hover:after { 
       border-right-color: #0186ba; 
       border-bottom-color: transparent; 
       } 


       #menu ul li:last-child > a, #menu2 ul li:last-child > a { 
       } 

      Clear floated elements #menu:after, #menu2:after { 
       visibility: hidden; 
       display: block; 
       font-size: 0; 
       content: " "; 
       clear: both; 
       height: 0; 
      } 

      * html #menu, * html #menu2 { 
      zoom: 1; 
      } 

      IE6 *:first-child + html #menu, *:first-child + html #menu2 { 
      zoom: 1; 
      } 

JavaScript:

  $(document).ready(function() { 
     $("#menu ul li, #menu > li ul li").click(function() { 
      //mouse click toggle menu items 
       $('>ul').toggle(  
       // mouseover 
       function() {    
        $(this).find('>ul').fadeIn('slow');   
       }); 
      }); 
     }); 

Answer 1

Основываясь на вашем HTML структуры все, что вы, вероятно, нужно это:

$(document).ready(function() { 

    $("#menu li > a").on('click', function(e){ 
     $(this).siblings('ul').toggle('slow'); 
    }); 

}); 

Fiddle

При этом независимо от того, сколько уровней подменю появляется эта регистрация один событие достаточно.

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