Css在腳本調用完成後沒有正確渲染屬性

我正在使用-webkit-border-radius：7px; -moz-border-radius：7px;使我的手風琴和按鈕彎曲。現在它的工作狀況良好。我的應用程序中有一點我的手風琴需要改變顏色，當我們點擊它時。兩個手風琴都使用兩個不同的圖像。並且爲此我寫了一個JavaScript函數來執行操作Css在腳本調用完成後沒有正確渲染屬性

$('.accordion').live("click", function() { 
     $(this).next('.content-toggle').toggle(); 
     if ($(this).hasClass('section-closed')){ 
      $(this).addClass('section-open'); 
      $(this).removeClass('section-closed'); 
     } 
     else 
     { 
      $(this).addClass('section-closed'); 
      $(this).removeClass('section-open'); 
     } 

     var total = $('.accordion').length; 
     var open = 0; 

     for (i=0; i<total; i++) { 
      if($('.faq-accordion').eq(i).hasClass('section-open')){ 
       open = open + 1; 
      } 
     } 

     if (total != open) { 
      $('.show-all').show(); 
      $('.hide-all').hide(); 
     } 
     else { 
      $('.hide-all').show(); 
      $('.show-all').hide(); 
     } 
    })

，我使用的CSS，使色彩等attributes.This工作在一個偉大的方式FIRE FOX但在IE7和8的手風琴是無法呈現css.Its能夠爲手風琴提供包括彎曲角落在內的所有屬性。但是，它保持不變，當我點擊它們時。隨着手風琴中的文字發生變化，我能夠感應到酒吧中的變化，但是點擊（即）'分段打開'到'分段關閉時需要切換到不同圖像的手風琴ed'和'section-closed'改爲'section-open'不會改變。當我刪除-webkit-border-radius：7px; -moz-border-radius：7px時，它工作正常，但我的主要想法是讓他們curvy.seems像IE錯誤是否有任何其他的替代原因的CSS應該在腳本調用後執行相同的方式。

來源

2012-02-08 user1046671

後的CSS塊以及請兩個.section僞開放和.section僞封閉不支持 – 2012-02-08 00:45:23

邊境方圓IE7-8 – 2012-02-08 01:29:44

IE7-8不支持Border Radius。這就是爲什麼刪除它已經解決了你的問題。你說過，但是

無論是手風琴使用了兩個不同的圖像

那麼你可以做的就是把「彎曲角」在您的圖像代替。這些將顯示一樣好，在IE7和8

來源

2012-02-08 01:32:06

@thanks的答覆mikey.one爲你 – user1046671 2012-02-08 02:39:40

：有沒有什麼辦法，如果沒有圖像，我們正在使用背景顏色，寬度和填充等屬性以及彎曲的角落來製作手風琴吧，並且它上面有一個圓角。您的解決方案對於圖像完美地工作但在我們目前的要求中，我們不想爲任何手風琴使用圖像，所以問題又回來了，正如我再次聲明的那樣，我無法爲需要更改色彩的酒吧渲染CSS。是否有解決方案這個棘手的一個。謝謝 – user1046671 2012-02-09 02:45:44

在所有瀏覽器中執行此操作的最簡單且最一致的方法是使用圖像。所以，如果你沒有一個，就做一個。 IE7-8永遠不會支持邊界半徑。 – 2012-02-09 02:48:36

重要的問題是，border-radius不IE7-8支持所以這就是爲什麼它不顯示...

在另一方面，雖然，您可以通過緩存引用jQuery的結果集提高代碼很多..

$('.accordion').live("click", function() { 
    var self = $(this); // caching $(this) since it is being used a lot 
    self.next('.content-toggle').toggle(); 
    if (self.hasClass('section-closed')){ 
     self.addClass('section-open'); 
     self.removeClass('section-closed'); 
    } 
    else 
    { 
     self.addClass('section-closed'); 
     self.removeClass('section-open'); 
    } 

    var total = $('.accordion').length; 
    var open = 0; 
    var faq = $('.faq-accordion'); // caching $('.faq-accordion') since it is being used in a loop 
    for (i=0; i<total; i++) { 
     if(faq.eq(i).hasClass('section-open')){ 
      open = open + 1; 
     } 
    } 

    if (total != open) { 
     $('.show-all').show(); 
     $('.hide-all').hide(); 
    } 
    else { 
     $('.hide-all').show(); 
     $('.show-all').hide(); 
    } 
});

甚至更好的

var open = 0; 
    var faq = $('.faq-accordion'); // caching $('.faq-accordion') since it is being used in a loop 
    for (i=0; i<total; i++) { 
     if(faq.eq(i).hasClass('section-open')){ 
      open = open + 1; 
     } 
    }

可能成爲

var open = $('.faq-accordion:has(.section-open)').length;

來源

2012-02-08 01:37:46

@petrioli：謝謝你的回覆。 – user1046671 2012-02-08 02:40:55

Css在腳本調用完成後沒有正確渲染屬性

回答

相關問題