javascript - slideDown 到最后突然跳转

Question

我在垂直列中构建了一个相当正常的菜单-子菜单排列——嵌套 UL，使用 slideToggle 展开和折叠子菜单。

我要解决的问题是子菜单在最后“跳转”打开的方式。 (我正在最新版本的 Chrome 中进行测试。)它可能在第二个子菜单“优势”中最为引人注目。它不会在菜单折叠时跳转，只有在展开时才会跳转。

我认为问题可能与仅在菜单完全展开时添加的 :after 样式有关。具体来说，一旦菜单完全展开，类 current 就会被添加到 LI 标签中。但是注释掉切换该类的代码似乎没有效果。

$(document).ready(function() {
  $('#group-subnav > ul > li > a').on('click', function(e) {
    e.preventDefault();
    var $li = $(this).closest('li');
    $li.find('ul').slideToggle('', function() {
      $li.toggleClass('current')
    }).end().siblings().find('ul').slideUp('', function() {
      $li.siblings().removeClass('current')
    }).end();
  });
});

/* Normalize */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin:0;
  padding:0;
}
ol,ul {
  list-style:none;
}


#group-subnav {
  display: table-cell;
  vertical-align: top;
  background: #f6ca00;
  width: 159px;
  height: 100%;
}

#group-subnav a {
  display: block;
  color: inherit;
  text-decoration: none;
}

#group-subnav a:hover {
  /*    text-decoration: underline;*/
}

#group-subnav>ul {}

#group-subnav>ul>li {
  border-top: 2px solid #fff;
  font-size: 80%;
  text-shadow: 1px 1px 2px #eee;
  color: #333;
  letter-spacing: 1px;
  line-height: 1.2em;
  background: #bebebe;
  /* Old browsers */
}

#group-subnav>ul>li>a {
  padding: 6px 8px 12px;
  background: #bebebe;
  /* Old browsers */
  background: -moz-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bebebe), color-stop(50%, #b3b3b3), color-stop(100%, #808080));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
  /* IE10+ */
  background: linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#808080', GradientType=0);
  /* IE6-9 */
}

#group-subnav>ul>li>a:after {
  content: ' +';
  float: right;
}

#group-subnav>ul>li.current>a:after,
#group-subnav>ul>li:hover>a:after {
  font-size: 75%;
  content: ' \25bc';
}

#group-subnav>ul>li>ul {
  display: none;
  background: #f4e693;
  padding: 2em 0;
}

#group-subnav>ul>li.current>ul
/*,
            #group-subnav > ul > li:hover > ul*/

{
  display: block;
}

#group-subnav>ul>li>ul>li {
  text-shadow: none;
  padding: 5px 8px;
  border-bottom: 1px solid #e5b502;
  color: #666;
  font-size: 90%;
  letter-spacing: 0;
}

#group-subnav>ul>li>ul>li:first-child {
  border-top: 1px solid #e5b502;
}

#group-subnav>ul>li>ul>li>a {
  color: inherit;
  text-decoration: none;
}

#group-subnav>ul>li>ul>li>a:after {
  content: "\00a0>";
}

#group-subnav>ul>li>ul>li>a:hover {
  text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav id="group-subnav">
  <!-- one column wide -->
  <ul>
    <li class="current"><a href="#">Services</a>
      <ul>
        <li><a href="#">Workflow Analysis</a></li>
        <li><a href="#">Technology Assessment</a></li>
        <li><a href="#">Precision Conversion</a></li>
        <li><a href="#">Intelligent Indexing</a></li>
        <li><a href="#">Simple Search and Retrieval</a></li>
        <li><a href="#">Better Forms Management</a></li>
        <li><a href="#">Effortless Distribution</a></li>
        <li><a href="#">Total Security</a></li>
        <li><a href="#">Easier Regulatory Compliance</a></li>
        <li><a href="#">Scanning</a></li>
      </ul>
    </li>
    <li><a href="#">Benefits</a>
      <ul>
        <li>Faster Storage and Retrieval</li>
        <li>Meticulous Records Management</li>
        <li>Disaster Prevention and Recovery</li>
        <li>Heightened Security</li>
        <li>Freed-up Physical Space</li>
        <li>Responsive Customer Service</li>
      </ul>
    </li>
    <li><a href="#">Get Started</a>
      <ul>
        <li>Call our Strategic Services Manager to get started.<br>
          <li><a href="mailto:">Email</a></li>
      </ul>

      </li>
  </ul>
</nav>

View on jsFiddle

Answer 1

给你滑动切换的元素设置宽度。

http://jsfiddle.net/5gGum/6/

    #group-subnav > ul > li > ul {
        display: none;
        background: #f4e693;
        padding: 2em 0;
        width: 159px;
    }

这允许 jQuery 准确计算结束高度。

作为引用，我从这里了解到这个小技巧:http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm