javascript - 如何让按钮对应于不同的下拉 div？

Question

我有一个 div 部分，它在单击按钮时向下滑动。但是，我有三个按钮，需要 3 个不同的下拉 div。如何让每个按钮下拉一个包含不同内容的 div？

JSFiddle:http://jsfiddle.net/maddiwu/xe6xtfqh/

.slide {
    overflow-y: hidden;
    max-width: 100%;
    overflow-x: hidden;
    max-height: 100vw;
    /* approximate max height */
    width:100%;
    /*height: 45vw;*/
    background:#2e2e2e;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(1, 1, 1, 1);
}
.slide.closed {
    max-height: 0;
}
.banner7 {
    width:80%;
    background:#d8d8d8;
    margin-top:1.5vw;
    padding-top:2vw;
}
.banner8 {
    width:80%;
    background:#2e2e2e;
    margin-top:1vw;
    margin-left:10%;
    padding-top:2vw;
}

<center>
    <div class="banner7" style="margin-bottom:0vw;margin-top:2vw;">
        	<h1 style="color:#B40404;font-size:2.5vw;margin:1.5vw;font-family:Futura;">MAIN SECTION</h1>

        <p style="font-family:Helvetica Neue;font-size:1vw;color:back;margin-left:5vw; margin-right:5vw; text-align:center; margin-top:-1vw;margin-bottom:3vw;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        <table style="width:95%; margin-left:2%;">
            <tr>
                <td>
                    <div style="background:white;width:21vw;margin-top:0vw;margin-bottom:2vw;padding:1vw;">
                        	<h1 style="color:#b40404;font-size:1.5vw;font-family:Futura; text-align:center;margin-top:1vw;">SUB SECTION ONE</h1>

                        <p style="font-family:Helvetica Neue;font-size:1vw;color:#2e2e2e; text-align:center; margin-top:1vw;margin-bottom:1vw;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                        <center>
                            <img src="images/button.png" style="width:35%;height:3vw;margin-top:1vw; margin-bottom:1vw;" onmouseover="this.src='images/button-hover.png'" onmouseout="this.src='images/button.png'" onload="closed" onclick="document.getElementById('slide').classList.toggle('closed');" />
                        </center>
                    </div>
                </td>
                <td>
                    <div style="background:white;width:21vw;margin-top:0vw;margin-bottom:2vw;padding:1vw;">
                        	<h1 style="color:#b40404;font-size:1.5vw;font-family:Futura; text-align:center;margin-top:1vw;">SUB SECTION TWO</h1>

                        <p style="font-family:Helvetica Neue;font-size:1vw;color:#2e2e2e; text-align:center; margin-top:1vw;margin-bottom:1vw;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                        <center>
                            <img src="images/button.png" style="width:35%;height:3vw;margin-top:1vw; margin-bottom:1vw;" onmouseover="this.src='images/button-hover.png'" onmouseout="this.src='images/button.png'" onclick="document.getElementById('slide').classList.toggle('closed');" />
                        </center>
                    </div>
                </td>
                <td>
                    <div style="background:white;width:21vw;margin-top:0vw;margin-bottom:2vw;padding:1vw;">
                        	<h1 style="color:#b40404;font-size:1.5vw;font-family:Futura; text-align:center;margin-top:1vw;">SUB SECTION THREE</h1>

                        <p style="font-family:Helvetica Neue;font-size:1vw;color:#2e2e2e; text-align:center; margin-top:1vw;margin-bottom:1vw;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                        <center>
                            <img src="images/button.png" style="width:35%;height:3vw;margin-top:1vw; margin-bottom:1vw;" onmouseover="this.src='images/button-hover.png'" onmouseout="this.src='images/button.png'" onclick="document.getElementById('slide').classList.toggle('closed');" />
                        </center>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</center>
<div>
    <div class="slide" id="slide">
        <div style="width:100%; background:#2e2e2e; padding:1vw; text-align:center;">
            <table style="width:80%">
                <tr>
                    <td>
                        <iframe style="margin-left:20%;width:45vw;height:30vw;" src="//www.youtube.com/embed/P7mS83pOPso" frameborder="0" allowfullscreen></iframe>
                    </td>
                    <td>
                        <center>
                            	<h1 style="color:#d8d8d8;font-size:2.5vw;font-family:Futura; text-align:center;margin-top:0vw;margin-left:20vw;">DROP SECTION</h1>

                            <p style="font-family:Helvetica Neue;font-size:1vw;color:white;margin-left:11vw;margin-right:-8vw; text-align:center; margin-top:1vw;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                    </td>
                </tr>
            </table>
            </center>
        </div>
        <div style="width:100%; background:#d8d8d8; padding:1vw; text-align:center;">
            <center>
                <center>
                    	<h1 style="color:#b40404;font-size:2.5vw;font-family:Futura; text-align:center;margin-top:2vw;">DROP SECTION</h1>

                    <p style="font-family:Helvetica Neue;font-size:1vw;color:#2e2e2e;margin-right:10vw;margin-left:10vw; text-align:center; margin-top:-1vw;margin-bottom:2vw;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                </center>
                </td>
                </tr>
                </table>
            </center>
        </div>
    </div>
</div>
</div>
<br>

Answer 1

我无法帮助您编写代码，因为这会花费很多时间，但我可以提供思路。
您可以使用 MVC( Model View Controller 模式)来帮助您在单个 div 上呈现数据。