Divi 子菜单默认折叠 - CSS

如果你正在使用WordPress的Divi主题，并且希望将子菜单默认折叠起来，而不是展开显示，那么这篇文章就是为你准备的！

实现方法

通过添加一些CSS代码，你可以让所有的子菜单默认折叠起来。以下是代码：

body .et_pb_menu .menu-item-has-children > a:after {
    content: "\f107";
    font-family: "ETmodules";
    font-size: 8px;
    display: inline-block;
    margin-left: 4px;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

body .et_pb_menu .menu-item-has-children > ul {
    display: none;
}

body .et_pb_menu .menu-item-has-children.show-sub > ul {
    display: block;
}

将以上代码添加到你的Divi主题中，就可以实现折叠子菜单的效果。现在，当用户点击父菜单时，子菜单将展开。

解释

这段CSS代码主要通过以下方法实现折叠子菜单的效果：

1. 添加一个“ + ”符号到有子菜单的父菜单的末尾。这个符号是使用字体图标来实现的。这个符号告诉用户有子菜单，但现在是折叠起来的状态。

2. 设置子菜单的默认显示状态为“ none ”。这样，所有子菜单都将默认折叠起来。

3. 当用户点击父菜单时，“ show-sub ”这个类将添加到该菜单的 class 中。这将导致 CSS 中的“ display: none ”变成“ display: block ”，并显示子菜单。

总结

通过上述方法，你可以轻松地折叠Divi主题中的子菜单，让你的网站更清晰易懂。希望这篇文章对你有所帮助！