jQuery 向上和向下滑动 Div - Bootstrap 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28826703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slide up and Slide down Div - Bootstrap 3
提问by Naveed Javaid
I'm currently working on Bootstrap 3 and making the HTML Markup but I don't know how to make this type of widget
我目前正在使用 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.
点击“需要帮助？” 应该向下滑动并隐藏，然后在 div 下方向上滑动到它的位置......当点击十字架时，弹出窗口应该隐藏和“需要帮助？” 再次向上滑动。
HTML Markup below
下面的 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 -->
Please let me know how this is possible.
请让我知道这怎么可能。
Here is the screenshot for better understanding
这是屏幕截图以便更好地理解
回答by CannonFodder
If you're using bootstrap, why not use it's included Collapse functionality provided with the boostrap JavaScript files.
如果您使用的是 bootstrap，为什么不使用它包含的 Bootstrap JavaScript 文件提供的折叠功能。
See here: http://getbootstrap.com/javascript/#collapse
请参阅此处：http: //getbootstrap.com/javascript/#collapse
Without seeing how you are trying to achieve this on the client side it's hard to make suggestions on just your HTML markup. For a quick and easy option, use the Bootstrap JS includes and add a few extra tags to let that do the binding for you :). If you need extra functionality such as hiding buttons when one is clicked that can be achieved quite easily in jQuery.
如果没有看到您如何在客户端尝试实现这一点，就很难仅对您的 HTML 标记提出建议。要获得快速简便的选项，请使用 Bootstrap JS 包含并添加一些额外的标签来为您进行绑定:)。如果您需要额外的功能，例如在单击时隐藏按钮，这可以在 jQuery 中轻松实现。
