Question

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

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

正如你在我的.xhtml文件中看到的那样，一个section-middle将用作主条，所有颜色属性和moz-tool工具包使其圆化在我的CSS文件中声明。我正在使用moz-tool套件和jquery圆角使我的手风琴角落在IE和Mozilla中都圆润。它在mozilla中迷人地工作但在IE中它没有呈现栏的颜色当我点击它时，切换操作正常工作，因为我可以看到当我点击它时，栏中的信息会弹出和降低。

我唯一的问题是酒吧的颜色，因为它点击它时它没有正确呈现。即使点击后也保持相同的绿色。当我删除moz-take kit时它工作正常但是没有圆角corner.I我无法弄清楚它是用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;

我已经使用过您的代码了！重要的是解决了这个问题。

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

1 个答案: