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的CSS规则集，其中两个是!important和选择器特异性。我不完全确定，但我认为您可以使用更具体的选择器（例如!important）来击败ul.AspNet-Menu ul.someClass。

除此之外，你可能想尝试通过放置一个同样重要的规则集来覆盖CSS。这必须是在静态服务器CSS之后解释的规则集。

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

现在这都是未经测试的，我只是在这里进行理论制作，所以你可能想亲自检查一下。：）

Answer 3

你有没有理由使用！这里很重要。如果你把它拿出并从你的选择器中删除了可见性规则：它工作正常

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

由于CSS中的！important，无法为扩展崩溃设置动画

3 个答案: