Question

我使用的是-webkit-border-radius：7px; -moz-border-radius：7px;让我的手风琴和按钮弯曲。现在它的工作正常。我的应用程序中有一点我的手风琴需要在我们点击它时改变颜色。手风琴使用两个不同的图像。为此我写了一个javascript函数来执行操作

$('.accordion').live("click", function() {
        $(this).next('.content-toggle').toggle();
        if ($(this).hasClass('section-closed')){
            $(this).addClass('section-open');
            $(this).removeClass('section-closed');
        }
        else
        {
            $(this).addClass('section-closed');
            $(this).removeClass('section-open');
        }

        var total = $('.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();
        }
    })

我使用css来获取颜色和其他属性。这在Fire fox中工作得非常好但是在IE7和8中，手风琴无法渲染css.Its能够渲染所有的手风琴属性包括弯曲的角落。但是，当我点击它们时，它仍然是相同的。当手风琴中的文字正在改变时，我能够感觉到条形的变化，但是当手风琴需要改变到不同的图像时点击（即）'section-open'到'section-closed'和'section-closed'到'section-open'没有改变。当我删除-webkit-border-radius时，它正常工作：7px; -moz- border-radius：7px;但我的主要想法是使它们变得曲线。看起来像IE的bug是否还有其他选择因为css在脚本调用完成后应该以相同的方式执行。

Answer 1

重要的问题是IE7-8不支持border-radius，所以这就是它没有显示的原因..

另一方面，您可以通过缓存对jQuery结果集的引用来大量改进代码。

$('.accordion').live("click", function() {
    var self = $(this); // caching $(this) since it is being used a lot
    self.next('.content-toggle').toggle();
    if ( self.hasClass('section-closed') ){
        self.addClass('section-open');
        self.removeClass('section-closed');
    }
    else
    {
        self.addClass('section-closed');
        self.removeClass('section-open');
    }

    var total = $('.accordion').length;
    var open = 0;
    var faq = $('.faq-accordion'); // caching $('.faq-accordion') since it is being used in a loop 
    for (i=0; i<total; i++) {
        if( faq.eq(i).hasClass('section-open') ){
            open = open + 1;
        }
    }

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

更好的

    var open = 0;
    var faq = $('.faq-accordion'); // caching $('.faq-accordion') since it is being used in a loop 
    for (i=0; i<total; i++) {
        if( faq.eq(i).hasClass('section-open') ){
            open = open + 1;
        }
    }

可能会成为

var open = $('.faq-accordion:has(.section-open)').length;

Answer 2

IE7-8不支持Border Radius。这就是为什么删除它已经解决了你的问题。但是你确实说过

两种手风琴都使用两种不同的图像

所以你可以做的就是在图像上加上“曲角”。这些将在IE7和8

中表现得同样出色

在进行脚本调用后，Css无法正确呈现属性

2 个答案: