Elementor 手风琴默认关闭 - CSS

在使用Elementor时，如果需要实现手风琴效果，需要添加Accordion（手风琴）模块。但是默认情况下，手风琴的所有内容都会显示出来。如果希望手风琴默认关闭，只有点击标题后才能展示内容，可以使用CSS进行样式修改。

实现方法

在Elementor中，选择需要添加手风琴的区域。在左侧的工具栏中，选择Accordion模块。然后在“内容”选项卡中添加需要展示的内容和标题。在“外观”选项卡中，设置手风琴的基本样式，如背景色、字体大小、边框等。

接下来，在“高级”选项卡中，将“Accordion默认项”设置为“Closed”。这样，在页面加载时，手风琴的所有内容都会被关闭，只有点击标题后才能展示。

但是，这样只能实现手风琴默认关闭的功能，手风琴的样式还需要进行修改。这时，可以通过CSS样式来调整手风琴的样式。

CSS样式修改

在Elementor中，可以通过内置代码编辑器或者主题的CSS样式表来添加CSS样式。

以下是CSS样式代码示例：

.elementor-accordion .elementor-accordion-item:not(.elementor-active) .elementor-accordion-title {
    background-color: #f7f7f7;
    color: #333333;
    border: 1px solid #eeeeee;
}

解释：

• .elementor-accordion：指定手风琴的父容器。
• .elementor-accordion-item：指定手风琴的每一项。
• .elementor-accordion-title：指定手风琴的标题。
• :not(.elementor-active)：排除当前已经打开的手风琴项。
• background-color：设置背景色。
• color：设置文字颜色。
• border：设置边框样式。

可以根据需要修改样式中的属性值。

注意事项

• 切记在修改CSS样式时，请先备份原始样式。
• 修改样式时，要注意CSS选择器的正确性，以避免影响其他模块的样式。
• 在使用CSS样式时，要注意兼容性和性能问题，避免样式冲突或对网页性能造成影响。