可折叠列表

时间:2012-03-14 18:05:59

标签: javascript css

我找不到我要找的东西。我认为,因为答案可能适合那些比我更有经验的人,而且部分编码被遗漏了。

假设我开始使用空白的html文档...(我知道如何调用样式表,但有时我不确定答案中提供的代码是示例样式表还是我应该称之为样式表和那么我是否需要创建.css文件?并且,一些答案表明您必须在标题部分添加一些关于javascript的内容。我有点迷失。

无论如何,我正在尝试建立一个网站,如果你将鼠标悬停在一个标题上,就会有一个扩展列表。

实施例。 次要度数(显示然后展开,以便在“次要度数”上方悬停时显示以下内容)      工商管理辅修      计算机信息系统辅修      经济学辅修

我一直在寻找,但只是不确定我所看到的。我非常感谢指导。我厌倦了把头靠在墙上。 :O)

4 个答案:

答案 0 :(得分:1)

有许多不同的解决方案。有些只需要css,有些需要css和javascript之间的混合。我建议玩一些教程,并使用jsfddle.net,它允许你输入css html和javascript到3个框,并显示输出。

Here is a basic example of what you have asked for.

答案 1 :(得分:1)

这将要求你掌握html,css和javascript如何组合在一起。您可以找到一些可以帮助您入门的good tutorials。我建议下载一些示例代码并查看它,直到您看到这些代码如何协同工作。只要你了解脚本与html和css的交互方式,大多数javascript都可以剪切和粘贴。您需要知道html ID和css属性的工作原理。

答案 2 :(得分:0)

您可以完全避免使用JavaScript并使用CSS。 See this jsFiddle获取如何完成的示例。基本上,您可以根据元素是否悬停而应用不同的样式:

section ul
{
    display: none;    
}

section:hover ul
{
    display: block;
}

答案 3 :(得分:0)

我使用JavaScript / JQuery制作了一个快速的JSFiddle解决方案: http://jsfiddle.net/V9DJK/2/

以下是使用CSS执行相同操作的相同HTML: http://jsfiddle.net/6TWEN/