爲什麼jQuery UI手風琴打開/關閉動畫如此波濤洶涌？

我一直在試圖找出這一個，我只是不能看到任何問題 - 以及相同的手風琴（相同jqueryui版本1.9.2）在另一個網站上沒有問題，我甚至將主題切換到使用與其他網站相同的網站，我仍然對這個網站感到不快。爲什麼jQuery UI手風琴打開/關閉動畫如此波濤洶涌？

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

（工作手風琴）http://www.georgiancollege.ca/programs/

，要麼因爲它的正常工作here

任何想法可能是什麼，應該不會是jQuery UI的主題？

來源

2013-03-19 tsdexter

的JavaScript調用的acordion粘貼。是否有任何可選參數通過？ – Cristy 2013-03-19 13:45:00

您的HTML標記無效。段落標籤內不能有h1和div元素。通過HTML驗證器運行代碼並修復問題。 – epascarello 2013-03-19 13:47:27

@epascarello甚至沒有注意到 - 它一定是由wordpress編輯器添加的。 – tsdexter 2013-03-19 14:22:46

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

問題在於這個CSS。如果您將其更改爲px而不是em，則其功能正常。

來源

2013-03-19 13:46:46

而這種差異造成的原因很可能是由於所述手風琴周圍的字體設置，例如手風琴的父母沒有與身體相同的字體大小。 – 2013-03-19 14:24:42

@Brad M - 謝謝，那就是訣竅。 – tsdexter 2013-03-26 14:32:35

我想你已經忘記了添加的所有文件相關性，在標籤

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

包括所有的依賴關係，那麼它應該工作正常..

來源

2013-03-19 13:50:28 MarmiK

對於未來的讀者，我也當我遇到這個問題沒有包裹着我的手風琴行的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>

來源

2013-06-09 14:52:14

感謝您的提示，在我得到這一點之前，我非常沮喪 – 2013-09-11 18:17:55

我有一個類似的問題。看了幾個不同的解決方案。我發現這是一個保證金問題。

這爲我工作：

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

我有hightstyle設置爲通過內容的方式。

希望這會有所幫助！

來源

2013-12-16 20:55:43

在我的情況下，這是由於我的手風琴名稱的邊距以及手風琴內容中元素的邊緣。您需要將這些元素的邊距設置爲0.如果您想在這些元素之間添加空格，則可以使用填充並且不會導致問題。

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

我在手風琴內容的div裏面使用了段落標籤。如果您使用其他內容，請確保該元素的邊距設置爲0.

來源

2014-01-28 22:50:37 user2671295

僅供參考 - 我將手風琴放到其裸露的骨頭上，它在動畫製作過程中仍然跳下來，並在完成時備份。然後我在上面添加了這些樣式，並且問題修復了它自己。 – 2014-03-24 20:27:25

另外，對我來說，'#accordion h3 {margin：0; }'是唯一重要的風格。 – 2014-03-24 20:44:20

我在使用Views嵌套手風琴構建的Drupal中遇到類似嵌套手風琴的問題。我刪除了第38行的views-nested-accordion.css，它有.ui-accordion .ui-accordion-content {height: auto !important;}，它解決了我的問題。

來源

2015-05-13 15:03:06 Kirby

的關鍵流暢的動作是「heightStyle」 EG

$("#accordion").accordion({ 
    heightStyle: "content" 
});

來源

2016-04-12 11:12:17 john

爲什麼jQuery UI手風琴打開/關閉動畫如此波濤洶涌？

回答

相關問題