jquery - 由于 CSS 中的 important，无法为展开折叠设置动画

Question

我正在尝试使用 jquery 的 slideToggle 在菜单中实现简单的展开/折叠。我在一个怪物公司网站上工作，该网站有一些我们无法触摸的 CSS 文件(在服务器中调用)，CSS 文件有几个!重要声明，特别是可见性:可见!重要；并显示:阻止!重要； . 这些声明干扰了 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/