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

时间：2015-01-29 02:11:14

标签： javascript html css

我有一个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>

2 个答案:

答案 0 :(得分：0)

我无法帮助您使用代码，因为它需要花费很多时间，但我可以提出这个想法。
您可以使用MVC（模型视图控制器模式）来帮助您在单个div上呈现数据。

答案 1 :(得分：0)

这是CSS的限制之一，你无法根据另一个元素的状态（点击，悬停，滚动等）更改样式。每个div都需要侦听单击事件，然后运行一个方法来为相应的div设置动画。你需要javascript。

https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

但jQuery可能会让你更快... http://api.jquery.com/click/

相关问题
最新问题