javascript - 脚本调用后 Css 无法正确呈现

Question

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

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

正如您在我的 .xhtml 文件中看到的那样，中间部分将用作主栏，所有颜色属性和使它变圆的 moz-tool 套件都在我的 CSS 文件中声明。我正在使用 moz-tool kit 和 jquery 圆 Angular 使我的 Accordion Angular 在 IE 和 mozilla 中都是圆 Angular 的。它在 mozilla 中工作得很好，但在 IE 中，当我点击它时它没有渲染栏的颜色，切换操作工作正常，我可以看到当我点击它时，栏中的信息会上下弹出。

我唯一的问题是条的颜色，因为当它被点击时它没有正确呈现。即使在点击之后它也保持相同的绿色。当我移除 moz-took 套件时它工作正常但没有圆 Angular Angular 落。我无法弄清楚是 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 解决了这个问题。