脚本调用后 CSS 无法正确呈现

Question

我目前正在使用两个手风琴栏，当它们被点击时，它们都会呈现两种不同的颜色。第一个显示绿色。功能是在点击时切换栏下方所需的信息。

再次单击它应该切换回呈现不同颜色的所有信息，为此我使用 java 脚本进行切换。以前我们在这个栏上使用了三个不同的图像，而现在，我需要删除图像。

正如您在我的 .xhtml 文件中看到的那样，section-middle 将用作主栏，并且所有颜色属性和使其圆润的 moz-tool 工具包都在我的 CSS 文件中声明。我正在使用 moz-tool kit 和 jquery 圆角使我的手风琴角在 IE 和 mozilla 中都变圆了。它在 mozilla 中工作得很好，但在 IE 中，当我单击它时，它不会为栏呈现颜色，切换操作工作正常，我可以看到当我点击它时，栏里的信息会上下弹出。

我唯一的问题是栏的颜色，因为当它点击它时它没有正确呈现。即使在点击之后它也保持相同的绿色。当我移除 moz-took 套件时它工作正常但没有四舍五入角落。我无法弄清楚是 java 脚本还是 CSS 的问题。这是我的 java 脚本和 css 以及我的 xhtml 文件。是否有任何解决方案。我需要在我的脚本中进行任何代码更改吗？网站的其余部分我可以完美地填充这个栏。但是当我使用脚本时似乎问题来了。

---

css for first green bar
#layout-container .section-open .section-middle {background-color:#99CC33;}
#layout-container #layout-detail .columns .section-middle { width: 624px; }
#layout-container #layout-detail .columns .section-open .section-left, #layout-container #layout-detail .columns .section-open .section-right, #layout-container #layout-detail .columns .section-closed .section-left, #layout-container #layout-detail .columns .section-closed .section-right {
    float: left;
    height: 20px;
    margin: 0;
    padding: 0;
    width: 6px;
-webkit-border-radius: 7px;-moz-border-radius: 7px
}

第二个栏的css

#layout-container #layout-detail .section-closed .section-middle{background-color:#efe8dc; background-image: url(../../images/icons5.png); background-repeat:no-repeat; background-position: 612px -1392px;-webkit-border-radius: 7px;-moz-border-radius: 7px;}

我的 xhtml

<ui:fragment rendered="#{current.index le 8 or current.last}">
            <div class="columns">
                <div
                    class="#{current.first ?'faq-accordion section-open' : 'faq-accordion section-closed'}">

                    <span class="section-middle">
                        <h2>
                            <h:outputText value="#{priority.statementDescription}" />
                        </h2> </span>

我的脚本

$('.faq-accordion').live("click", function() {
        $(this).next('.content-toggle').toggle();
        // $('.show-all').show();
        // $('.hide-all').hide();

        if ($(this).hasClass('section-closed')){
            $(this).addClass('section-open');
            $(this).removeClass('section-closed');
        }
        else
        {
            $(this).addClass('section-closed');
            $(this).removeClass('section-open');
        }

        var total = $('.faq-accordion').length;
        var open = 0;

        for (i=0; i<total; i++) {
            if($('.faq-accordion').eq(i).hasClass('section-open')){
                open = open + 1;
            }
        }

        if (total != open) {
            $('.show-all').show();
            $('.hide-all').hide();

        }
        else {
            $('.hide-all').show();
            $('.show-all').hide();            
        }
    })


    $('.show-all').click(function(){
        $('.content-toggle').show();
        $('.content-toggle').prev('div').addClass('section-open');
        $('.content-toggle').prev('div').removeClass('section-closed');
        $(this).hide();
        $('.hide-all').show();
        return false;
    });       

    $('.hide-all').click(function(){
        $('.content-toggle').hide();
        $('.content-toggle').prev('div').addClass('section-closed');
        $('.content-toggle').prev('div').removeClass('section-open');
        $(this).hide();
        $('.show-all').show();
        return false;
    });        

Answer 1

试试这个：

-webkit-border-radius: 7px !important;-moz-border-radius: 7px !important;

我已经使用了你的代码并且 !important 解决了这个问题。