Javascript 表中的下拉列表（CSS/HTML/Java）

我似乎遇到了一个问题，我想在我的表中放置一个下拉“可扩展”选项。我曾尝试使用Javascript来实现这一点，但它似乎总是只向右侧列添加信息

我对HTML/CSS不是很在行，我非常愿意接受任何关于清理我的网页的建议

我不想让人觉得我只是在请求别人帮我做这件事，我已经尝试过很多次了，但都没有用

---

我们的想法是让我的表格在“我的模块”中每个单元格的右角都有一个小“v”，单击该单元格时，会显示表格中有关“模块”的更多信息。（这是我的表格中每个条目的外观）：

以下是一些代码，可以从添加

单击
事件到类为
的元素开始。展开
。单击此按钮后，您可以切换隐藏段落。我让你试试这个

我建议对用户体验进行一点改进，但基本的机制是存在的


$（文档）.ready（函数（）{
$（“.expand”）。单击（函数（）{
//显示。说明如果隐藏，如果当前显示，则隐藏
$（this.closest（“td”）.find（“.description”）.toggle（）；
//一点样式向用户显示内容已经扩展
if（$（this）.hasClass（“蓝色文本”））{
$（此）.removeClass（“蓝色文本”）；
}否则{
$（此）.addClass（“蓝色文本”）；
}
});
});
。说明{
显示：无；
}
.蓝色文本{
颜色：蓝色；
}
桌子{
字体系列：arial，无衬线；
宽度：100%；
背景色：rgba（0,0,0,0）；
填充顶部：50px
}
运输署，
th{
边框：1px实心rgb（200200200200）；
文本对齐：居中；
填充：8px；
}
th{
字体大小：正常；
背景色：rgba（2222222220.6）
}
.th{}模块
tr：悬停{
背景色：rgba（20,91,130,0.3）
}
}
.可折叠{
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.主动，
.可折叠：悬停{
背景色：#555；
}
.内容{
填充：0 18px；
显示：无；
溢出：隐藏；
背景色：#f1f1；
}

模块ID
模块
信用
学期
PHIL01
CS&9660简介


这里有一些额外的信息。

20
冬天
PHIL01
大学简介▼


这里有一些额外的信息。

20
冬天
PHIL01
德语导论
20
冬天
PHIL01
哲学导论
20
冬天
PHIL01
哲学导论
20
冬天
PHIL01
哲学导论
20
冬天
可能您必须了解工具提示的概念，不同的表单上有不同的附加功能，其中一些不是真正的气泡，必须符合您的需要。请参阅google图片查看他们的外观，代码需要在我的浏览器中重新排序，以便将脚本放在html表元素和jquery.js导入之后，否则回答会很好。谢谢，我添加了$（document.ready（）；添加到脚本中，以便在尝试添加任何单击事件之前等待表加载。这绝对是完美的，与我几乎完成的操作非常接近！