私はこれを理解しようとしてきましたが、何の問題も見られません - 同様に、同じアコーディオン (同じ jqueryui バージョン 1.9.2) が別のサイトで問題なく動作し、テーマを切り替えて他のサイトと同じですが、私はまだこのサイトで途切れ途切れになっています。
また、ここでは正常に機能しているため、jquery ui テーマであってはなりません。
それが何であるかについてのアイデアはありますか?
将来の読者のために、アコーディオン行のコンテンツを div タグでラップしていなかったときに、この問題も経験しました。
悪い:
<div class="accordion">
<h3>Delivery Address</h3>
<table class="address">
<tr><td>...</td></tr>
</table>
</div>
良い:
<div class="accordion">
<h3>Delivery Address</h3>
<div>
<table class="address">
<tr><td>...</td></tr>
</table>
</div>
</div>
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
}
問題はこのcssにあります。em ではなく px に変更すると、正しく機能します。
スムーズなアクションのカギは「heightStyle」EG
$( "#accordion" ).accordion({
heightStyle: "content"
});
私は同様の問題を抱えていました。いくつかの異なるソリューションを見た後。マージンの問題であることがわかりました。
これは私のために働いた:
#accordion .ui-accordion-header {
margin:0;
}
ちなみに私はhightstyle
コンテンツにセットを持っています。
お役に立てれば!
私の場合、これはアコーディオン タイトルの余白と、アコーディオン コンテンツ内の要素の余白が原因でした。これらの要素のマージンを 0 に設定する必要があります。これらの要素の間にスペースを追加する場合は、パディングを使用できますが、問題は発生しません。
#accordion h3 {
margin: 0;
padding: 10px 0;
}
#accordion p {
margin: 0;
padding: 10px 0;
}
アコーディオン コンテンツの div 内で段落タグを使用しました。他のものを使用する場合は、その要素のマージンが 0 に設定されていることを確認してください。
タグにすべてのファイルの依存関係を追加するのを忘れていると思います
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.accordion.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.button.min.js?ver=1.9.2'></script>
すべての依存関係を含めると、正常に動作するはずです..