JQueryアコーディオンに問題があります。デフォルト以外のペインにデフォルトのペインよりも多くのコンテンツがあり、autoHeightがtrueであるコンテンツペインを作成すると、ペインを切り替えるときに素敵なアニメーションが提供されますが、デフォルト以外のペインには不要なスクロールバーが表示されます。
http://jqueryui.com/themeroller/ に移動し、「Blitzer」や「Humanity」などのテーマに切り替えてから、サンプルアコーディオンのセクション3を開くと、実際の動作を確認できます。 Safari 3.2.1とFirefox 3.0.8で私に起こります。
AutoHeight = falseに切り替えると、これは発生せず、すべてのコンテンツペインは正しい高さになりますが、コンテンツペインはアニメーションの最後にのみレンダリングされて奇妙に見えるため、アニメーションをオフにしてこの奇妙さを回避する必要がありました。 。
私は何かを誤解しているか、これはjQuery UIアコーディオンのバグです。 2つのうちどちらか(または両方とも)がわかるようにしてください。
いろいろ試してみました。 autoHeight:false自体は機能しませんでした。これは最終的に私のために働いたものです:
$( "#accordion" ).accordion({
heightStyle: "content",
autoHeight: false,
clearStyle: true,
});
これを固定幅のSharePointコンテンツエディターWebパーツで使用しています。これにより、アコーディオンウィジェットにコンテンツを追加するときに高さの問題が発生します。
このコンボオプションの使用は私にとっては機能します。1。jquery/uiの現在のバージョン
$( '#x' ).accordion({
autoHeight: false,
clearStyle: true
});
同様の問題に直面しましたが、CSSの次の変更が機能しました。
.ui-accordion .ui-accordion-content{
overflow:visible !important;
}
現在(jQuery UI-v1.8を使用)、autoHeightで十分で、スクロールバーは表示されません。
jQuery("#accordion").accordion(
{
autoHeight:false
}
);
heightStyle: "content"
問題の解決に役立ちました。参照: アコーディオン
私はこれが古いことを知っていますが、私はこの問題を抱えていてここに上陸しました。アニメーションを壊さずにアニメーションを削除するソリューションは、次の場所にあります。
http://webdevscrapbook.wordpress.com/2012/02/24/jquery-ui-unnecessary-scrollbar-in-accordion/
クリックしたくない怠惰な数人にとって、短い答えは次のとおりです。
.ui-accordion .ui-accordion-content { overflow:hidden !important; }
アコーディオンのCSS
これは、上記の http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion リンクから取得しました。それは記事の下のコメントの一つでした。スクロールバーを取り除きますが、残りのdivのフォーマットも保持します。上記の回答により、コンテンツが国境を越えて流れる可能性があります。
.ui-accordion .ui-accordion-content{
height:auto!important;
}
これは私にとってはうまくいきます:
.ui-accordion-content-active, .ui-accordion-header-active{
display: block;
}
私は試した
.ui-accordion .ui-accordion-content{ overflow:visible !important; }
しかし、最初のタブでいくつかの視覚的なアーティファクトを見ました。だから私はこの方法で問題を修正しました:
<script type="text/javascript">
(function() {
var fixScroll = function(event, ui) {
$(event.target).find('.ui-accordion-content-active').css('overflow', 'visible');
}
$('#tabs').accordion({
header: "h2",
create: fixScroll,
change: fixScroll
});
})();
</script>
Ui-accordion-contentのパディングがオーバーライドされているかどうかを確認します。
私がCSSに以下を入れたときに同じ問題が発生しました:
.container .ui-widget-content {
padding-right: 3%;
}
以下のように変更して、スクロールバーが無くなりました!
.container .ui-widget-content:not(.ui-accordion-content) {
padding-right: 3%;
}
自動高さもオンにしていません。