4

jQueryスーパーフィッシュメニュープラグインで奇妙な問題が発生しています。使用するとすべてが正しく機能し、要素にanimation: {opacity: 'show'}適用されるインラインスタイルは次のとおりです。ul

display: none; visibility: hidden;

使用したいのですが、スーパーフィッシュが要素に追加されており、適用されるインラインスタイルは次のとおりanimation: {height: 'show'} であるため、ドロップダウンメニューには第1レベルのドロップダウンしか表示されません。overflow: hidden;ul

display: none; overflow: hidden; visibility: hidden;

問題はoverflow: hidden;、ネストされたul要素がホバーに表示されないことです。そのため、問題overflow: visible !important;を修正したものを追加してみましたが、メニューの動作が遅く、この解決策は必要ありません。

そのため、cssファイル内でこの動作が行われていることがわかりました。削除すると、superfishはul要素に* {box-sizing: border-box;}追加されません。overflow: hidden;

codepenでデモを作成しました：http： //codepen.io/anon/pen/Awqdn

起こっていることの要約：

1-animation: {opacity: 'show'}持っていても問題なく動作します* {box-sizing: border-box;}

2-animation: {height: 'show'}プラグインによってul要素に隠されたオーバーフローが追加されたため、機能しません。この問題は* {box-sizing: border-box;}、cssファイルから削除すると解決されます。

では、どうすればこれを修正できますか？overflow: hidden;そして、私が持っているときにスーパーフィッシュを追加させるものはbox-sixing: border-box;何ですか？

そして、事前に感謝します。

4

2 に答える 2

5

それがない* {box-sizing: border-box;}と、アニメーション中に与えoverflow:hiddenられ、アニメーションの終了後に削除されます。ただし、この行では、アニメーション後のオーバーフローは削除されません。jQueryトラッカーhttp://bugs.jquery.com/ticket/10335でチケットを見つけました

この問題を解決するには、アニメーション後のオーバーフローを削除します

jQuery(function($) {
  $('#nav').superfish({
    animation: {height:'show'},
    onShow: function(){
      $(this).css("overflow", "visible");
    }
  });
});

http://codepen.io/anon/pen/Apqyl

于 2013-01-10T13:44:44.940 に答える
1

たぶん、overflow：hiddenの代わりにclearfixハックを使用してください。

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
于 2013-01-08T14:20:42.970 に答える