1

jqueryのslideToggleを使用して、メニューに簡単な展開/折りたたみを実装しようとしています。私は、触れることができない（サーバーで呼び出される）いくつかのCSSファイル、いくつかの!important宣言を持つ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;
}
4

3 に答える 3

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/

于 2012-04-20T10:08:31.393 に答える
0

ブラウザーは、いくつかの基準に基づいて要素に適用する CSS ルールセットを決定します。そのうちの 2 つは!importantセレクターの特異性です。完全にはわかりませんが!important、より具体的なセレクター (例: ul.AspNet-Menu ul.someClass) を使用することで打ち負かすことができると考えています。

そうでない場合は、同等に重要なルールセットを配置して、CSS をオーバーライドしてみてください。これは、静的サーバー CSS の後に解釈されるルールセットでなければなりません。

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

現在、これはすべてテストされておらず、ここで理論を作成しているだけなので、自分で確認してください. :)

于 2012-04-20T10:09:02.243 に答える
-1

ここで !important を使用している理由はありますか。それを取り出してセレクターから可視性ルールを削除すると、正常に動作します

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

于 2012-04-20T10:11:47.967 に答える