展開點擊更改爲自動展開

Question

我有一個腳本，在點擊時展開名爲expandedtitle的div。它在一個名爲橫幅的容器中。我希望div expanndedtitle自動展開

<pre><div id="banner"> 
    <div id="collapsedtitle">Click To Expand</div> 
    <div id="expandedtitle">Expanded</div> 

</div> 
<div id ="collapsed"></div> 
<img id="closeImage" src="images/close100x100.png"></pre> 

整個腳本。

<script>var preloadQueue = [ 'SingleExpanding' ]; 

document.write('<script src="'+ (window.API_URL || 

'http://s1.adform.net/Banners/scripts/rmb/Adform.DHTML.js?bv= '+的Math.random（））+'「> </SCRIPT>'）;

</script> 

<script> 
    var clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com'); 
    var landingpagetarget = dhtml.getVar('landingPageTarget', '_blank'); 

    var closebutton = document.getElementById('closeImage'); 
    var banner = document.getElementById('banner'); 
    var collapsed = document.getElementById('collapsed'); 

    //variables for animation 
    var collapsedtitle = document.getElementById('collapsedtitle'); 
    var expandedtitle = document.getElementById('expandedtitle'); 
    var logo = document.getElementById('logo'); 
    var line = document.getElementById('line'); 
    var border = document.getElementById('border');   

     var SingleExpanding = Adform.Component.SingleExpanding; 
     var settings = { 
      x: 121, //collapsed part x 
      y: 0, //collapsed part y 
      collapsedWidth: 728, 
      collapsedHeight: 90, 
      expandEasing: SingleExpanding.regularEaseOut, 
      collapseEasing: SingleExpanding.regularEaseIn, 
      expandTime: 0.5, 
      collapseTime: 0.5 
     }; 
     SingleExpanding.init(settings); 

     SingleExpanding.on(SingleExpanding.EXPAND_START, function() { 
      console.log(SingleExpanding.EXPAND_START); 
      expandAnimation(); 

     }); 
     SingleExpanding.on(SingleExpanding.COLLAPSE_START, function() { 
      console.log(SingleExpanding.COLLAPSE_START); 
      collapseAnimation(); 
     }); 

var bannerNumber = dhtml.getVar('bn', 0); 
//if testing locally bannerNumber will be 0, when uploaded to Adform banner will have some bn assigned to it 

if (bannerNumber == 0){ 
    console.log('local'); 
    closebutton.onclick = function() { 
     collapseAnimation(); 
    }; 

    collapsed.onclick = function() { 
     expandAnimation(); 
    }; 
} else { 
    console.log('on Adform'); 
    closebutton.onclick = function() { 
     dhtml.external.close && dhtml.external.close(); 
    }; 

    collapsed.onclick = function() { 
     dhtml.external.expand && dhtml.external.expand(); 
    }; 
} 

banner.onclick = function() { 
    window.open(clickTAGvalue,landingpagetarget); 
} 

function expandAnimation(){ 
//simple banner element animation - TweenLite used as an example 
      TweenLite.to(border, 0.5, {css:{width:"970px", height:"415px", left:"0px"}});<strong></strong> 
      TweenLite.to(closebutton, 1, {css:{opacity:"1"},delay:0.4}); 
      TweenLite.to(collapsedtitle, 0.5, {css:{opacity:"0"}}); 
      TweenLite.to(expandedtitle, 0.5, {css:{opacity:"1"}}); 
      TweenLite.to(line, 0.5, {css:{top:"230px", left:"300px"}}); 
      TweenLite.to(logo, 0.5, {css:{width:"170px", top:"340px", left:"790px"}}); 
      TweenLite.to(collapsed, 0.1, {css:{top:"-90px"}}); 
} 

function collapseAnimation() { 
      TweenLite.to(border, 0.5, {css:{width:"728px", height:"90px", left:"121px"}}); 
      TweenLite.to(closebutton, 0.1, {css:{opacity:"0"}}); 
      TweenLite.to(collapsedtitle, 0.5, {css:{opacity:"1"}}); 
      TweenLite.to(expandedtitle, 0.5, {css:{opacity:"0"}}); 
      TweenLite.to(line, 0.5, {css:{top:"75px", left:"150px"}}); 
      TweenLite.to(logo, 0.5, {css:{width:"130px", top:"30px", left:"710px"}}); 
      TweenLite.to(collapsed, 0.1, {css:{top:"0px"}}); 
} 

Answer 1

爲什麼不利用CSS做

？

在點擊後向橫幅DIV添加（或刪除）額外的類（例如'expanded'），並控制調整大小和動畫。