JavaScript 实现多栏闭合展开式广告位菜单效果实例
在前端网站中，广告位的位置和展示方式是非常重要的一部分。本文将介绍如何使用 JavaScript 实现多栏闭合展开式广告位菜单效果。该效果可用于展示多个广告位，通过点击折叠/展开按钮来控制显示或隐藏。
效果演示
下面是该效果的演示动画：
HTML 结构
首先，我们需要创建一个 HTML 结构来容纳广告位和折叠/展开按钮。这里我们使用了一个 section 元素来作为整个广告位模块的容器，内部包含多个子元素 div.advertisement 作为不同广告位的展示区域。
-------- -----------------------
------- -------------------
---- ----------------------
---- ------- ---
------
---- ----------------------
---- ------- ---
------
---- ----- ---
------- ------------------------- ------------
----------注意，我们还添加了一个 button 元素作为折叠/展开按钮，它的 CSS 样式可以在后文中进行定义。
CSS 样式
在 CSS 样式中，我们为整个广告位模块容器 .advertisements 设置了一些基本样式，包括字体、背景颜色、边框等。
我们还为每个广告位 div.advertisement 设置了初始高度和过渡效果，在折叠/展开时会通过 JavaScript 动态改变高度值。
----- ---- - ------------ ----------- - --------------- - ---------- ------ ------- - ----- ----------------- -------- ------- --- ----- ----- -------- ----- ----------- ----------- - -------------- - ------- ------ ----------- ------ ---- ----- --------- ------- -
我们还需要为折叠/展开按钮 .toggle-btn 添加样式。这里我们使用了一个字符实体 ▼ 来表示一个向下的箭头，当菜单展开时变为一个向上的箭头 ▲。
----------- - -------- ------ ------- ---- ----- -------- --- ----- -------------- ---- ------- --- ----- ----- ----------------- ----- ------- -------- - ------------------ - -------- -------- -------- ------------- ------------ ---- - ------------------------ ------------------ - -------- -------- -
注意到我们为 .advertisements 添加了一个 hide-ads 类，它将在 JavaScript 中用于控制折叠和展开。当该类存在时，按钮的箭头将变为向上的箭头，表示菜单已经展开。
JavaScript 代码
现在，我们来实现 JavaScript 部分的代码。我们首先需要获取到折叠/展开按钮和广告位区域，然后为按钮添加一个点击事件监听器。
----- --------- - -------------------------------------- ----- -------------- - ------------------------------------------ ----------------------------------- ---------- - -------------------------------------------- ---
在点击事件回调函数中，我们只需简单地使用 classList.toggle 方法来切换 .advertisements 元素上的 hide-ads 类即可。这个类将会触发 CSS 样式中的折叠或展开效果，从而实现广告位的显示或隐藏。
完整
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/3836