jQuery手風琴菜單：滾動到活動菜單項

Question

我制作了一個手風琴菜單，旨在用作高效的手機菜單。 我已經為此目的使用了jQuery 2.1.1庫。

不起作用的部分是與body標記動畫有關的部分。

我希望文檔滾動到活動菜單項，而不是像現在那樣導航到導航標簽。

這是我想出的：

 $('#menu').children('ul').on('click', '.menu-item', function(e) { if ($(window).width() < 640) { e.preventDefault(); var $menu_item = $(this).closest('li'); var $sub_menu = $menu_item.find('.sub-menu'); var $other_sub_menus = $menu_item.siblings().find('.sub-menu'); if ($sub_menu.is(':visible')) { $sub_menu.slideUp(200); $menu_item.removeClass('selected'); } else { $other_sub_menus.slideUp(200); $sub_menu.slideDown(200); $menu_item.siblings().removeClass('selected'); $menu_item.addClass('selected'); } } $('html,body').animate({ scrollTop: $(this).offset().top }, 500); console.log($(this).offset().top); }); 

 body { font-family: Arial, sans-serif; } p { font-size: 14px; line-height: 1.6; } nav ul { list-style-type: none; margin: 0; padding: 0; } #menu { max-width: 640px; } #menu ul { background: #069; } #menu ul.sub-menu { display: none; background: #fefefe; } #menu ul li a { text-decoration: none; display: block; font-size: 13px; color: #fff; padding: 0 10px; height: 32px; line-height: 30px; position: relative; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #menu ul.sub-menu li a { padding-left: 25px; color: #555; } #menu > ul > li > a:after { display: inline-block; vertical-align: middle; content: "\\2304"; position: absolute; right: 0; font-size: 20px; line-height: 20px; padding-bottom: 10px; width: 30px; text-align: center; top: 0; color: #fff; } #menu li.selected a:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Page title</h1> <nav id="menu"> <ul> <li><a href="#" class="menu-item">Software</a> <ul class="sub-menu"> <li><a href="#">Operating systems</a></li> <li><a href="#">MS Office</a></li> <li><a href="#">Web development tools</a></li> </ul> </li> <li><a href="#" class="menu-item">Monitors &amp; screens</a> <ul class="sub-menu"> <li><a href="#">Monitors</a></li> <li><a href="#">LCD</a></li> <li><a href="#">TV</a></li> <li><a href="#">DVD players</a></li> </ul> </li> <li><a href="#" class="menu-item">Networking</a> <ul class="sub-menu"> <li><a href="#">Routers</a></li> <li><a href="#">Network Adapters</a></li> <li><a href="#">Modems</a></li> <li><a href="#">Cables</a></li> </ul> </li> <li><a href="#" class="menu-item">Print &amp; scan</a> <ul class="sub-menu"> <li><a href="#">Printers</a></li> <li><a href="#">3D printers</a></li> <li><a href="#">Scanners</a></li> </ul> </li> </ul> </nav> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 

更新：我替換了scrollTop: $('#menu').offset().top與scrollTop: $(this).offset().top ，如Kano所建議的那樣。

它效果更好，但還不夠好。 如果您連續單擊多個菜單項，則控制台記錄的最高偏移量將給出一個異常值。

謝謝！

Answer 1

只需在您的jQuery代碼段中更改此部分即可：

$('body').animate({
  scrollTop: $("#menu").offset().top
}, 300);

對此：

$('body').animate({
  scrollTop: $(this).offset().top
}, 300);

這樣，當您調用animate()進行滾動時，您將使用單擊的菜單項的偏移量而不是#menu選擇器（在您的情況下始終會產生nav元素）。