9

私はかなり通常のメニューとサブメニューの配置を垂直の列に作成しました。つまり、ネストされた UL を使用slideToggleして、サブメニューの展開と折りたたみを行います。

私が解決しようとしている問題は、サブメニューが最後に「ジャンプ」して開く方法にあります。(私は Chrome の最新リリースでテストしています。) おそらく、2 番目のサブメニューである "Benefits" で最も顕著です。メニューが折りたたまれているときはジャンプせず、展開しているときにのみジャンプします。

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

jsFiddle で表示

4

9 に答える 9

16

スライドトグルしている要素に幅を設定します。

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

于 2012-06-25T17:48:06.603 に答える
10

私は同じ問題を抱えていましたが、何もうまくいきませんでした。「トランジション」プロパティを何かに設定すると、問題が発生することが判明しました:PIは、スライドオブジェクトでそれをnoneに設定するだけで、slideDownがチャームとして機能するようになりました:-)

于 2015-03-27T12:56:08.827 に答える
5

私にとって問題は、CSS パディングがあったことでした。パディングを削除し、元のタグをカプセル化する別の html タグに転送すると、すべてが機能しました。

于 2015-07-14T12:23:28.847 に答える
5

これは古い質問であることは知っていますが、私の解決策が他のグーグル社員に役立つかもしれません。

私にとって、問題はパディングとボックスサイジング：ボーダーボックスが原因でした。
特定の高さや幅は必要ありませんでした (両方を試し、最終的に削除しました)。 

box-sizing:content-box;
padding: 20px;

これは、スクロールボックスでうまくいきました。パディングのない box-sizing:border-box が問題を引き起こしていないことに注意してください。

JQuery のバージョンは 1.7.1 です

于 2015-09-24T19:07:30.137 に答える
0

私の場合、「!important」プロパティで設定された上下のパディングでした。「!important」を削除すると、アニメーションが再びスムーズになります。

于 2020-11-12T15:20:46.103 に答える