Javascript 如何专业地使用下拉菜单和div？

我正在用顶部导航栏上的按钮制作一个页面，如Facebook上的消息或通知按钮

单击图标后，图标将更改为：

我只是使用onclick函数完成了这项工作，该函数将图标src更改为第二幅图像中的图标src 紫红色指针的“display”属性和带有标题的div从“none”更改为“block”

但事情不是这样的。这是如何专业地完成的

我正在查看Facebook的源代码，图标的链接是一个带有以下图片的页面：

我在SO和WhatsappWeb的页面上看到过类似的图片。。它们包含对角的所有图标

---

你能给我解释一下吗？还有，我怎样才能做到专业呢？

专业地，比如拿工资？很简单，找一个愿意付钱的人。顺便说一句，这种技术使用精灵。“专业”是一个模糊的术语。在生产环境中使用这些包含几十个映像（spritemap）的映像的原因是它可以节省请求和带宽。不是要求20-30张不同的图片，而是要求一张图片，并在适当的地方显示其中的一部分。对不起，对于professional，我的意思是，开发人员是如何做到的？