CSSで重要なのためにexpand collapseをアニメーション化できません

Question

jqueryのslideToggleを使用して、メニューに単純な展開/折りたたみを実装しようとしています。私はいくつかの重要な宣言、特に可視性：目に見える！重要な宣言を持つCSSファイルに触れることができない（サーバーで呼ばれる）いくつかのCSSファイルを持っているモンスター企業のWebサイトで働いています。表示：ブロック！重要; 。 これらの宣言は、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

Iあなた自身の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

ブラウザ!importantセレクタ特異性であるそのうちの2つの要素based on a number of criteria、に適用するものCSSルールセットを決定します。私は完全にはわかりませんが、より具体的なセレクタ（例：ul.AspNet-Menu ul.someClass）を使用して!importantを打つことができると考えています。

これを除いて、同じように重要なルールセットを置いてCSSを上書きすることをお勧めします。これは、静的サーバーCSSの後に解釈されるルールセットでなければなりません。

ここではこれはすべてテストされていないので、私はここで理論作成しているので、自分で調べてみてください。 :)

Answer 3

ここには重要な理由があります！あなたはそれを取ると、あなたのセレクタからvisibiltyルールを削除する場合：！なぜあなたが使用して行う `important`：それは

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