Question

这是我的代码，它运行正常。但是，我不想把风格保留在div标签中，所以我创建了一个类＆＃34;部分＆＃34;在style.css中并将其放在类标记中。但是，现在扩张和崩溃并不起作用。任何帮助将不胜感激。

<div class="col-sm-10" >
            <div id="profile_section" class="center-block sections"style="border:2px solid black; 
            height:40px;
            width:60%;">
                <h4>Profile<h4>
                <button id="1" onclick="func1(this)" class="icon_button glyphicon glyphicon-chevron-down">
            </div>
            <br>

<script>

function func1(item){
    item = item.closest("div");
    if(item.style.height=="300px"){
        console.log("height=300px");
        item.className = 'center-block smooth_contract';
        item.addEventListener("animationend", function(){
            item.className = "center-block";
            item.style.height="40px";
            item.style.width="60%";
            //scrollTo(document.body,item.offsetTop,100);
        });
    }
    else if(item.style.height=="40px"){
        item.className = 'center-block smooth_expand';
        item.addEventListener("animationend", function(){
            item.className = "center-block";
            item.style.height="300px";
            item.style.width="100%";    

        });

    }
}

添加课程＆＃34;部分＆＃34;。

<div class="col-sm-10" >
            <div id="profile_section" class="center-block sections">
                <h4>Profile<h4>
                <button id="1" onclick="func1(this)" class="icon_button glyphicon glyphicon-chevron-down">
            </div>
            <br>
</div>

Answer 1

我必须在javascript中使用getComputedStyle来从外部文件中获取css

使用Javascript展开和折叠Div

1 个答案: