如何制作类似于 CodeIgniter 用户指南中的弹出式目录？答案

【问题标题】：How do you make the pop-up table of contents like the one in the CodeIgniter User Guide?如何制作类似于 CodeIgniter 用户指南中的弹出式目录？
【发布时间】：2018-11-16 01:37:50
【问题描述】：

https://www.codeigniter.com/user_guide/tutorial/index.html

访问该链接并查找页面右上角的目录按钮。我想把它应用到我正在制作的网页上。

您将这种设计技术称为什么？有关如何操作的教程的任何链接？非常感谢。

【问题讨论】：

标签： php jquery html css codeigniter

【解决方案1】：

要创建该菜单，您可以使用 css 和 jquery。用

创建一个 div

position:absolute;top:-400px;width:auto;height:430px;

然后你用 jquery 为它制作动画。点击时，设置 top:0px。您还可以使用动画 jquery 函数。乐：

$(document).ready(function(){ $('div a').click(function(){ $(this).parent().css('top','0px'); $(this).addClass('opened'); $(this).click(function() { if($(this).hasClass('opened')){ $(this).parent().css('top','-280px'); } }) }); });

<div style="width:100%;background-color:red;position:absolute;height:300px;top:-280px;"><a href="javascript:void(0)" style="width:80px;height:20px;background-color:black;bottom:0;position:absolute;"></a></div>

这是一个示例代码。从这里你可以编辑它，你可以动画它。祝你好运！

【讨论】：

如果不赶时间..我可以为你写一个示例代码，但只需要 5-6 小时.. 我会编辑我的答案。
完成。请检查一下。（带有 html/body 和 html 页面的所有标签）
等待我找到了一个解决方法，您可以通过以下方式简化 jquery 代码： $(function(){ $('div a').click(function(){ if($(this) .hasClass('opened')){ $(this).parent().css('top','-280px'); $(this).removeClass('opened'); } else { $(this). parent().css('top','0px'); $(this).addClass('opened'); } }); });