3

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');         
                });
            });
        });
4

1 に答える 1

2

あなたのhtml構造に基づいて、おそらく必要なのはこれだけです：

$(document).ready(function () {

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

});

フィドル

これで、サブメニューが何階層表示されても、イベント登録はこの1つで十分です。

トグル擬似イベントは廃止されたため、クリック イベントを使用して自分で処理する必要があることに注意してください。

于 2013-09-13T02:47:22.617 に答える