javascript - 单击更改展开以自动展开

Question

我有一个脚本，可以在单击时扩展名为 expandedtitle 的 div。它位于一个名为 banner 的容器中。我希望 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>
    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 添加(或删除)一个额外的类(例如，“扩展”)并控制调整大小和动画。