javascript - 切换 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

这样无论出现多少级子菜单，一次事件注册就足够了。

请注意，切换伪事件已被弃用，您需要使用点击事件自行处理。