jquery - 向上滑动和向下滑动 Div - Bootstrap 3

Question

我目前正在开发 Bootstrap 3 并制作 HTML 标记，但我不知道如何制作这种类型的小部件

On click “Need help?” should slide down and hide and below div slide up in it’s place ... When the cross is clicked popup should hide and “Need help?” slide up again.

下面的 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 -->

请告诉我这是怎么可能的。

这是为了更好地理解的屏幕截图

Image Link

Answer 1

如果您正在使用 bootstrap，为什么不使用它随 boostrap JavaScript 文件提供的折叠功能。

请参见此处:http://getbootstrap.com/javascript/#collapse

如果不了解您如何在客户端实现这一目标，就很难仅对您的 HTML 标记提出建议。如需快速简单的选择，请使用 Bootstrap JS 包含并添加一些额外的标签，让它为您完成绑定(bind):)。如果您需要额外的功能，例如单击按钮时隐藏按钮，则可以在 jQuery 中轻松实现。