2013-03-19 3 views
6

私はこれを理解しようとしていましたが、問題は見られません。同じアコーディオン(同じjqueryuiバージョン1.9.2)は別のサイトで問題なく動作します。他のサイトと同じものを使用してください。そして私はまだこのサイトを断ち切ります。jQuery UIアコーディオンのオープン/クローズアニメーションが途切れているのはなぜですか?

http://www.georgiancollege.ca/wpnew/accordion/?bypass=cache

(作業アコーディオン)http://www.georgiancollege.ca/programs/

そして、それはそれが何であるかhere

任意のアイデア罰金働いているいずれかのように、jqueryのUIのテーマではないでしょうか?

+0

あるacordionのJavaScript呼び出しを貼り付けます。オプションのパラメータが渡されていますか? – Cristy

+0

あなたのHTMLマークアップは無効です。段落タグ内にh1要素とdiv要素を持つことはできません。 htmlバリデーターを通してコードを実行し、問題を修正してください。 – epascarello

+0

@epascarelloはそれに気付かなかった - それはwordpress editorによって追加されていなければならない。 – tsdexter

答えて

5
.ui-accordion .ui-accordion-content { 
    padding: 1em 2.2em; 
} 

問題がこのCSSにあります。 emではなくpxに変更すると、正しく機能します。ときに私

+0

そして、これが違いを生む理由は、アコーデオンの親がボディと同じフォントサイズを持たないなど、前記アコーディオンの周りのフォント設定に起因する可能性が高い。 –

+0

@ブラッドM - ありがとう、そのトリックでした。 – tsdexter

1

私はそれが正常に動作する必要があり、すべての依存関係を含めタグで

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

、あなたはすべてのファイルの依存関係を追加するのを忘れていると思います。..将来の読者のために

12

は、私もこの問題を経験しています

悪い:

 <div class="accordion"> 
      <h3>Delivery Address</h3> 
      <table class="address"> 
       <tr><td>...</td></tr> 
      </table> 
     </div> 
divタグでの私のアコーディオンの行の内容を巻いていませんでした

グッド:

 <div class="accordion"> 
      <h3>Delivery Address</h3> 
      <div> 
       <table class="address"> 
        <tr><td>...</td></tr> 
       </table> 
      </div> 
     </div> 
+1

このヒントをお寄せいただきありがとうございます。私はこの点を得る前にかなり不満でした。 –

2

私は同様の問題を抱えていました。いくつかの異なるソリューションを探した後。私はマージンの問題であると感じました。

これが私の仕事:

#accordion .ui-accordion-header { 
    margin:0; 
} 

を私は道によってコンテンツへhightstyleセットを持っています。

希望すると便利です。

2

私の場合、これは私のアコーデオンのタイトルのマージンとアコーデオンのコンテンツ内の要素のマージンが原因でした。それらの要素のマージンを0に設定する必要があります。これらの要素の間にスペースを追加する場合は、パディングを使用することができますが、問題は発生しません。

#accordion h3 { 
margin: 0; 
padding: 10px 0; 
} 
#accordion p { 
    margin: 0; 
    padding: 10px 0; 
} 

私は、アコーディオンコンテンツのdiv内に段落タグを使用しました。何か他のものを使用する場合は、その要素のマージンが0に設定されていることを確認してください。

+0

FYI - 素人の骨にアコーデオンを取り除き、アニメーション中にジャンプしていて、完了したらバックアップしていました。私は上記のスタイルを追加し、問題自体が修正されました。 –

+0

また、私のために、 '#accordion h3 {margin:0; } 'が重要な唯一のスタイルでした。 –

1

Views Nested Accordionを使用して作成されたDrupalのネストされたアコーディオンで同様の問題が発生しました。私は.ui-accordion .ui-accordion-content {height: auto !important;}のviews-nested-accordion.cssの38行目を削除し、問題を修正しました。

0

スムーズなアクションへの鍵は "heightStyle" EG

$("#accordion").accordion({ 
    heightStyle: "content" 
}); 
関連する問題