全宽可折叠div

时间:2018-03-08 00:50:10

标签: html css collapse

有谁知道这种点击效果如何运作? https://prospek.ca/equipe/

如果您点击其中一个团队成员,它会展开一个全宽div,显示团队成员的更多信息。

我尝试使用bootstrap中的折叠功能执行此操作,但是我没有成功,因为我无法让一个div关闭并且您选择了另一个条目。

我想让div在这里有一个像这个截图的指针。Screenshot

2 个答案:

答案 0 :(得分:0)

可能的实现是最初隐藏信息div(显示:无)。然后在任何团队成员的点击事件后,您可以在使用javascript / JQuery更新该div的内容后调用info-div.show()。

如果用户再次点击员工图片,请调用info-div.hide()隐藏div。

请查看此信息以获取有关这些功能的信息:

http://api.jquery.com/hide/

http://api.jquery.com/show/

祝你好运

答案 1 :(得分:0)

他们最有可能像这样使用jQuery函数slideToggle():

$(".team-member").slideDown();

检查http://api.jquery.com/slidetoggle/以获取更多相关信息。

也可能要检查两者:

$(".team-member").slideUp();

dislike

功能