Semantic-UI 菜单下拉项内容

Semantic-UI 是一款现代化且易于使用的前端 UI 框架，它提供了一些非常实用的组件，如菜单下拉项。这个组件可以让你轻松地创建复杂的菜单，并在菜单项中添加下拉内容，即子菜单。

基本使用

要创建一个具有下拉项内容的菜单，我们需要使用 dropdown 组件和 menu 组件。

<div class="ui dropdown item">
  <span class="text">菜单项</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">下拉项1</div>
    <div class="item">下拉项2</div>
    <div class="item">下拉项3</div>
  </div>
</div>

在上面的代码中，我们在 menu 元素内添加了三个 item 元素，它们将成为菜单项的下拉内容。菜单项类名为 dropdown item，而其中的 icon 类元素则是默认的下拉箭头图标。你可以根据需要更改这个图标的样式。菜单内容类名为 menu，其中的 item 元素则是下拉项内容。

可触发下拉项

有时候，在菜单项中添加一个下拉内容可能不太够，我们还需要添加一个可触发下拉项，当用户点击时，可以打开一个新的页面或弹出一个模态框。 Semantic-UI 也提供了这个功能。我们需要在菜单项内部，将 a 元素嵌套在 div 元素内，设置 href 属性或 data-modal 属性，代码如下：

<div class="ui dropdown item">
  <div class="text">菜单项</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <a href="#" class="item">可触发下拉项1</a>
    <a href="#" class="item">可触发下拉项2</a>
    <a href="#" class="item">可触发下拉项3</a>
  </div>
</div>

在上面的代码中，我们将 a 元素嵌套在 div 元素内，将 href 属性设置为 #，表示它是一个可触发下拉项，而不是下拉内容。

显示位置

默认情况下，下拉内容显示在菜单项底部。但是，有时候我们需要将它显示在菜单项的左侧或右侧。Semantic-UI 提供了两种方案：

向左偏移

使用 left aligned 类可以将下拉内容向左偏移，如下所示：

<div class="ui dropdown item">
  <span class="text">向左偏移</span>
  <i class="dropdown icon"></i>
  <div class="menu transition left aligned">
    <div class="item">下拉项1</div>
    <div class="item">下拉项2</div>
    <div class="item">下拉项3</div>
  </div>
</div>

在上面的代码中，我们在 menu 元素中添加了 left aligned 类，使得下拉内容向左偏移。

向右偏移

使用 right aligned 类可以将下拉内容向右偏移，如下所示：

<div class="ui dropdown item">
  <span class="text">向右偏移</span>
  <i class="dropdown icon"></i>
  <div class="menu transition right aligned">
    <div class="item">下拉项1</div>
    <div class="item">下拉项2</div>
    <div class="item">下拉项3</div>
  </div>
</div>

在上面的代码中，我们在 menu 元素中添加了 right aligned 类，使得下拉内容向右偏移。

使用 JS

如果你想在你的页面中添加一个下拉菜单项，你可以使用 Semantic-UI 的 JS 组件：

$('.ui.dropdown').dropdown();

这段代码将使用默认选项初始化所有的下拉菜单项。

你也可以使用下面这些选项来配置下拉菜单：

$('.ui.dropdown').dropdown({
  on: 'hover', // 悬停时触发下拉
  onChange: function(value, text, $selectedItem) {
    console.log(value, text, $selectedItem);
  }, // 菜单项更改时的回调
  // 更多选项
});

总结

Semantic-UI 菜单下拉项内容是一个非常实用和灵活的组件。你可以轻松地创建复杂菜单和下拉内容。我们可以通过上面的例子看到，它非常易于使用。同时，通过使用 JS 组件，可以自定义选项来实现更高级的功能。