Question

我为Prototype和Scriptaculous重写了一个以前工作精美且兼容的MooTools＆＃34; toggler＆＃34;允许两个不同的HighCharts图形在页面上的相同空间之间切换的外观的系统。它在IE11，Chrome，Firefox，Safari中运行良好，但特别是＆＃34;切换＆＃34;系统在IE9和10中不起作用。两个HighCharts都正确呈现，但.setStyle .appear和.fade似乎根本不会影响CSS。

document.observe("dom:loaded", function() {
$("rdb1").observe("click", function(){
        $("2253-2").setStyle({'opacity': '0'}),
        $("2253-2").setStyle({'top': '-9999em'}),   
        $("btnID-2").fade({duration: .01}),
        $("zoomOut-2").fade({duration: .01}),
        $("2253-1").appear({duration: .1}), 
        $("2253-1").setStyle({'top': '0'}),
        $("btnID-1").appear({duration: .01}),
        $("zoomOut-1").appear({duration: .01}),
        $("clr0").setStyle({'margin-bottom': '26px'})
});
$("rdb2").observe("click", function(){
        $("2253-1").setStyle({'opacity': '0'}),
        $("btnID-1").fade({duration: .01}),
        $("zoomOut-1").fade({duration: .01}),
        $("2253-2").setStyle({'top': '0'}),
        $("2253-2").appear({duration: .1}), 
        $("btnID-2").appear({duration: .01}),
        $("zoomOut-2").appear({duration: .01}),
        $("clr0").setStyle({'margin-bottom': '26px'})
});
});

和html：

<div id="legendwrap" class="noPrint">               
    <h4 class="chartViewLabel">View:</h4>               
    <label class="viewSelectBtn"><input id="rdb1" type="radio" name="toggler" value="1" checked/>&nbsp;&#37;T</label>               
    <label class="viewSelectBtn"><input id="rdb2" type="radio" name="toggler" value="2" />&nbsp;OD</label>          
</div>          

<div id="zoomwrap" style="float:left;text-align:left;margin-top:-1px;margin-left:2px;zoom: 1;display: block;z-index:2;overflow: hidden;" class="noPrint">
    <button id="zoomOut-1" class="btnz" style="z-index:2;position:relative;" ><i class="fa fa-search-minus"></i></button>               
    <button id="zoomOut-2" class="btnz" style="z-index:3;position:relative;opacity:0;"><i class="fa fa-search-minus"></i></button>          
</div>          

<div id="buttonwrap" style="float:right;text-align:right;margin:0 12px 0 10px;overflow: hidden;zoom: 1;display: block;">                
<div id="btnID-1" class="toHide" style="position:relative;padding-top:0px;overflow: hidden;zoom: 1;display: block;">                    
    <button id="helpBtn" class="btnz" ><i class="fa fa-question"></i></button>                  
    <button id="printit" class="btnz" ><i class="fa fa-print"></i></button>                 
    <button id="exportPNG" class="btnz" ><i class="fa fa-file-image-o"></i></button>                    
    <button id="exportPDF" class="btnz" ><i class="fa fa-file-pdf-o"></i></button>                  
    <button id="exportCSV" class="btnz" ><i class="fa fa-file-text-o"></i></button>             
</div>              
<div id="btnID-2" class="toHide" style="position:relative;opacity:0;overflow: hidden;zoom: 1;display: block;">                  <button id="helpBtn2" class="btnz" ><i class="fa fa-question"></i></button>                 
    <button id="printit2" class="btnz" ><i class="fa fa-print"></i></button>                    
    <button id="exportPNG2" class="btnz" ><i class="fa fa-file-image-o"></i></button>                   
    <button id="exportPDF2" class="btnz" ><i class="fa fa-file-pdf-o"></i></button>                 
    <button id="exportCSV2" class="btnz" ><i class="fa fa-file-text-o"></i></button>                
</div>          
</div>

<!--Line break and margin correction-->
<div id="clr0" class="clr" style="clear:both;line-height:0;">&nbsp;</div>   

<!--Render the chart--> 
<div id="graphwrap" style="position: relative;left: 0px;height:500px;">             
    <div id="2253-1" class="toHide" style="position:relative;margin-bottom:-500px;" ></div>
    <div id="2253-2" class="toHide" style="position:relative;opacity:0;top:-9999em;" ></div>
</div>

网站版本示例如下：http://buy.alluxa.com/317-5-1-5-od6-ultra-narrow-bandpass.html

我用这个把头发拉了出来。任何提示甚至预感都将不胜感激。非常感谢。

Answer 1

已解决的Magento v 1.9.1附带一个旧的Prototype.js版本1.7。我升级到Prototype 1.7.2，它解决了我的IE9和10个问题。我上面的代码没有错。

使用.fade和.appear处理不透明度的事情，甚至.setStyle都无法正常工作。它是使用最新的prototype.js版本1.7.2修复的：http://prototypejs.org/

Javascript＆＃34; toggler＆＃34;功能在IE9或IE10中不起作用（IE8有后备功能），但在IE11，Chrome，Firefox中工作

1 个答案: