無法動畫擴展崩潰由於！重要的CSS

Question

我試圖用jQuery的slideToggle在菜單中實現一個簡單的展開/摺疊。我正在一個怪物公司網站工作，該網站有一些我們無法觸及的CSS文件（在服務器中調用），其中包含幾個！重要聲明的CSS文件，特別是可見性：visible！important;並顯示：block！important; 。 這些聲明會干擾slideToggle的機制，雖然有動畫，但它結束菜單的時刻會跳回到「展開」狀態。在這裏很清楚，在jsfiddle：http://jsfiddle.net/h2PVT/。這也是內聯代碼：

<div class="AspNet-Menu-Vertical" id="zz1_CurrentNav"> 
     <ul class="AspNet-Menu"> 
      <li class="AspNet-Menu-Leaf"> 
       <a href="/dg/ias/whoweare/Pages/whoweare.aspx" class="AspNet-Menu-Link"> 
        Who we are</a> 
      </li> 
      <li class="AspNet-Menu-WithChildren AspNet-Menu-Selected"> 
       <a href="/dg/ias/whatwedo/Pages/Whatwedo.aspx" class="AspNet-Menu-Link AspNet-Menu-Selected"> 
        What we do</a> 
       <ul> 
        <li class="AspNet-Menu-Leaf"> 
         <a href="/dg/ias/whatwedo/Pages/Agencies.aspx" class="AspNet-Menu-Link" title="Agencies"> 
          Audit in Agencies</a> 
        </li> 
        <li class="AspNet-Menu-Leaf"> 
         <a href="/dg/ias/whatwedo/Pages/Commission.aspx" class="AspNet-Menu-Link" title="Audit in the Commission"> 
          Audit in the Commission</a> 
        </li> 
        <li class="AspNet-Menu-Leaf"> 
         <a href="/dg/ias/whatwedo/reports/Pages/Home.aspx" class="AspNet-Menu-Link" title="IAS reports"> 
          Our Reports</a> 
        </li> 
        <li class="AspNet-Menu-Leaf"> 
         <a href="/dg/ias/whatwedo/Pages/Listofportfolios.aspx" class="AspNet-Menu-Link" title="List of portfolios"> 
          List of portfolios</a> 
        </li> 
        <li class="AspNet-Menu-Leaf"> 
         <a href="/dg/ias/whatwedo/Pages/ITAudit.aspx" class="AspNet-Menu-Link" title="IT Audit"> 
          IT Audit</a> 
        </li> 
        <li class="AspNet-Menu-Leaf"> 
         <a href="/dg/ias/whatwedo/Pages/GRC.aspx" class="AspNet-Menu-Link" title="Description of the audit tool GRC"> 
          Our Audit Tool: GRC</a> 
        </li> 
       </ul> 
      </li> 
      <li class="AspNet-Menu-Leaf"> 
       <a href="/dg/ias/knowledgesharing/Pages/Home.aspx" class="AspNet-Menu-Link"> 
        Knowledge Sharing</a> 
      </li> 
      <li class="AspNet-Menu-Leaf"> 
       <a href="/dg/ias/tools/Pages/Home.aspx" class="AspNet-Menu-Link" title="Tools and procedures"> 
        Tools &amp; Procedures</a> 
      </li> 
     </ul> 

</div> 

的JS使用：

$('.AspNet-Menu-WithChildren a').click(function(e) { e.preventDefault(); 
    $('.AspNet-Menu-WithChildren ul').slideToggle('slow', function() { 
    }); 
}); 

是干擾的CSS（我想有更多的，但..我想這就夠了）

ul.AspNet-Menu ul { 
visibility: visible !important; 
} 

ul.AspNet-Menu ul { 
display: block !important; 
} 

Answer 1

我打賭你可以包括一些你自己的CSS。找到一個方法來做到這一點，使風格：

html body .importantHide { display:none!important;} 

做的JavaScript這樣的：

$('.AspNet-Menu-WithChildren a').click(function(e) { 
    e.preventDefault(); 
    $('.AspNet-Menu-WithChildren ul').slideToggle('slow', function() { 
     $(this).toggleClass('importantHide'); 
    }); 
});​ 

這將添加一個類，使其留下隱患。你可能不得不改變一些東西，使它看起來不錯。你可以自己做。如果沒有，請問！

這裏是的jsfiddle：http://jsfiddle.net/Allan/h2PVT/2/

Answer 2

瀏覽器確定應用到一個元素based on a number of criteria，其中兩個是!important和選擇特異性什麼CSS規則集。我不完全確定，但我認爲你可以通過使用更具體的選擇器（例如ul.AspNet-Menu ul.someClass）擊敗!important。

除此之外，您可能希望嘗試通過放置同樣重要的規則集來覆蓋CSS。這必須是在靜態服務器CSS後解釋的規則集。

ul.AspNet-Menu ul { 
    visibility : inherit !important; 
    display : inherit !important; 
} 

現在這是所有未經測試，我只是理論，各具特色的在這裏，所以你可能要檢查它自己。 :)

Answer 3

是否有一個原因，您正在使用！重要的是這裏。如果你把它拿出來，並從您選擇刪除公開程度規則：它工作正常

http://jsfiddle.net/ollie/8MRA5/