CSS не отображается должным образом после вызова скрипта - PullRequest
Новая
       4

CSS не отображается должным образом после вызова скрипта

1 голос
/ 16 февраля 2012

В настоящее время я использую две аккордеонные панели, в которых при нажатии на них отображается два разных цвета. Первый показывает зеленый цвет. Функциональность заключается в переключении необходимой информации вниз на панели при нажатии на нее.

Повторное нажатие должно переключить всю информацию, отображающую другой цвет, для чего я использую java-скрипт для переключения.Раньше мы использовали три разных изображения для этой панели, как и сейчас, мне нужно удалить изображения.

Как вы можете видеть в моем файле .xhtml, средняя секция будет использоваться в качестве основной панели, и всеатрибуты цвета и набор инструментов moz, чтобы сделать его округленным, объявлены в моем файле CSS. Я использую набор инструментов moz и закругленные углы jquery, чтобы сделать мои углы аккордеона округленными как в IE, так и в mozilla. Прекрасно работает в mozilla, но в IEкогда я нажимаю на нее, цвет панели не отображается, операция переключения работает правильно, так как при нажатии на нее информация на панели появляется вверх и вниз.

Моя единственная проблема связана сцвет панели, поскольку он не отображается должным образом, когда на него нажимают. Он остается тем же зеленым цветом даже после щелчка. Когда я удаляю moz-take kit, он работает нормально, но без закругленных углов. Я не могу понятьпроблема, будь то с Java-скриптом или CSS. Это мой Java-скрипт и CSS и мой файл xhtml.y решение для этого. Нужно ли мне вносить какие-либо изменения в код моего скрипта? На остальной части сайта я могу заполнить эту панель идеально. Но похоже, что проблема возникает, когда я использую скрипт. 

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;
    });

1 Ответ

0 голосов
/ 17 февраля 2012

Попробуйте это: 

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

Я использовал ваш код и! Важное исправил проблему.

...