Question

我制作了一个手风琴菜单，旨在用作高效的手机菜单。为此，我使用了 jQuery 2.1.1 库。

我想要的那部分不起作用的部分是关于身体标签动画。

我希望文档滚动到活动菜单项而不是 nav 标记，就像现在一样。

这就是我提出的：

＆＃13;

$('#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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

更新我根据卡诺的建议将scrollTop: $('#menu').offset().top替换为scrollTop: $(this).offset().top。

效果更好但不够好。如果您连续单击多个菜单项，则记录顶部偏移的控制台会给出异常值。

谢谢！

Answer 1

只需在jQuery代码段中更改此部分：

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

对此：

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

这样，当您通过调用animate()进行滚动时，您将获取所点击的菜单项的偏移，而不是#menu选择器（这总是导致了nav元素）在你的情况下）。

jQuery手风琴菜单：滚动到活动菜单项

1 个答案: