layui-icon layui-icon-down fold如何用在legend上面生效

您可以使用CSS中的伪类选择器`:after`来实现在`legend`元素上添加一个`<i>`标签，并在该标签上应用`layui-icon-down`类，从而实现类似于折叠图标的效果。以下是一个示例代码：

HTML代码：

<fieldset>
  <legend>示例</legend>
  <p>这是一些文本内容。</p>
</fieldset>

CSS代码：

/* 添加折叠图标 */
legend:after {
  content: "\e61a";
  font-family: "layui-icon";
  font-size: 12px;
  margin-left: 5px;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
legend.fold:after {
  transform: rotate(-180deg);
}

/* 鼠标悬停时修改样式 */
legend:hover {
  cursor: pointer;
  color: #009688;
}
legend:hover:after {
  color: #009688;
}

通过为`legend`元素添加`.fold`类，可以实现折叠图标的切换效果。同时，通过使用`transition`属性和鼠标悬停时的样式修改，可以实现更加平滑的动画效果和交互体验。

相关问题

layui-field-box fold 默认设置为折叠状态

在使用 layui-field-box 折叠面板时，可以通过设置 class="layui-hide" 来控制默认折叠状态。具体实现方式如下：

1. 在 HTML 中设置 layui-field-box 折叠面板的内容，并添加 class="layui-hide" 以控制默认折叠状态。

<div class="layui-collapse">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">折叠面板标题</h2>
    <div class="layui-colla-content layui-hide">
      折叠面板内容
    </div>
  </div>
</div>

2. 在 JavaScript 中使用 layui.element 模块初始化折叠面板。

layui.use(['element'], function(){
  var element = layui.element;
  
  //初始化折叠面板
  element.init();
});

这样设置之后，折叠面板的内容就会默认处于折叠状态，用户点击标题之后才会展开。

用layui-field-box fold编写一个面板折叠例子，并且默认折叠

可以参考以下代码实现一个默认折叠的面板：

<div class="layui-collapse">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">面板标题</h2>
    <div class="layui-colla-content layui-show">
      <div class="layui-field-box">
        面板内容
      </div>
    </div>
  </div>
</div>

其中，`layui-collapse` 为面板容器，`layui-colla-item` 为每个面板项，`layui-colla-title` 为面板标题，`layui-colla-content` 为面板内容容器，`layui-show` 表示默认展开。

如果要默认折叠，可以将 `layui-show` 改为 `layui-hide`，如下所示：

<div class="layui-collapse">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">面板标题</h2>
    <div class="layui-colla-content layui-hide">
      <div class="layui-field-box">
        面板内容
      </div>
    </div>
  </div>
</div>