Question

我有三个div，每个div的起始高度为120px，其中一个<a>显示在每个div中，其余<a>隐藏，直到通过点击{{切换显示1}}按钮。

我的所有.onclick切换都很好，但是当<a>的其余部分显示时，我需要将所有三个div的高度从120px切换到1200px。

请参阅JSfiddle HERE以查看问题。

HTML w / jQuery脚本：

<a>

CSS：

<a class="archive-button">Click here to display more updates</a>

                <script>
                    $(document).ready(function(){
                        $('.archive-button').on('click', function(){
                            $('.files').toggle();
                        });
                    });
                </script>

<div id = "container" style = "width:100%;">
    <div id ="main" style = "float:left; width: 33%; height: 120px">
            <h2><span style="color: black";><i class="fa fa-asterisk"></i></span><u>TEST</u></h2>
                <a href="files/TEST.xls";><img src="images/xls.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.pdf" style="display: none;";><img src="images/pdf.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.xls" style="display: none;";><img src="images/xls.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.docx" style="display: none;";><img src="images/doc.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.docx" style="display: none;";><img src="images/doc.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.docx" style="display: none;";><img src="images/doc.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.docx" style="display: none;";><img src="images/doc.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
    </div>
<div id = "main" style = "float:left; width: 34%; height: 120px">
            <h2><span style="color: black";><i class="fa fa-cubes"></i></span><u>TEST</u></h2>
                <a href="files/TEST.xlsx";><img src="images/xls.png" alt=""/><p><center>TEST &nbsp <span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.docx" style="display: none;";><img src="images/doc.png" alt=""/><p><center>TEST &nbsp <span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
    </div>
<div id = "main" style = "float:left; width: 33%; height: 120px">
            <h2><span style="color: black";><i class="fa fa-paperclip"></i></span><u>TEST</u></h2>
                <a href="files/TEST.wmv";><img src="images/video.png" alt=""/><p><center>TEST &nbsp <span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
    </div>

jQuery - 切换div高度.onclick

0 个答案: