1

我正在尝试使用 jquery 的 slideToggle 在菜单中实现简单的展开/折叠。我在一个怪物公司网站上工作，它有一些我们无法触摸的 CSS 文件（在服务器中调用），有几个 !important 声明的 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;
}
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 规则集，其中两个是!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 回答