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 -->

请告诉我这是怎么回事。

以下是更好理解的屏幕截图

Image Link

Answer 1

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

见这里：http://getbootstrap.com/javascript/#collapse

如果不了解您是如何在客户端实现这一目标的，那么很难就您的HTML标记提出建议。要获得快速简便的选项，请使用Bootstrap JS include并添加一些额外的标签，以便为您执行绑定:)。如果您需要额外的功能，例如在单击一个时隐藏按钮，这可以在jQuery中轻松实现。

向上滑动并向下滑动Div - Bootstrap 3

1 个答案: