上下滑動Div-Bootstrap 3

Question

我目前正在使用Bootstrap 3並制作HTML標記，但我不知道如何制作此類小部件

單擊時，“需要幫助？”應向下滑動並隱藏，而在div下方則應在其上方向上滑動...單擊十字架后，彈出窗口應隱藏並“需要幫助？”再次向上滑動。

下面的HTML標記

<div class="col-md-12 col-sm-12 col-xs-12 helpContainer no-gutter">
                            <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                                <a href="#" class="HelpButton">Need help? <i class="fa fa-plus"></i></a>
                            </div><!-- col-md-12 -->
                            <div class="col-md-6 col-sm-6 col-xs-12 no-gutter">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <a href="#" class="CloseButton"><i class="fa fa-times"></i></a>
                                </div><!-- col-md-12 -->
                                <p class="HelpPopup">Not sure which service offers the greatest return on investment for your company? <a href="#">We can help</a></p>
                            </div><!-- col-md-12 -->
                        </div><!-- col-md-12 -->

請讓我知道這是怎么可能的。

這是屏幕截圖，可讓您更好地理解

圖片鏈接

Answer 1

如果您使用的是引導程序，為什么不使用它包含在boostrap JavaScript文件中的“折疊”功能。

看到這里： http : //getbootstrap.com/javascript/#collapse

不了解您如何在客戶端上實現這一目標，很難僅對HTML標記提出建議。 為了方便快捷地選擇，請使用Bootstrap JS包含，並添加一些額外的標簽，以便為您完成綁定：)。 如果您需要額外的功能，例如單擊時隱藏按鈕，可以在jQuery中輕松實現。