Semantic UI 的 ui button 默认无点击行为，需手动绑定事件；dropdown 需显式初始化且 DOM 就绪；segment 默认 overflow: hidden 易致内容截断；modal 报错多因 JS 未加载或加载顺序错误。
为什么 ui button 不响应点击？
Semantic UI 的 ui button 默认只是样式类，不自带 JavaScript 行为。你写了个 <button class="ui button">提交</button>，但点击没反应——不是 bug，是设计如此。
- 必须手动绑定事件，比如用原生
addEventListener或 jQuery 的.on('click', ...) - 如果用了 Semantic UI 的 JS 组件（如
modal、dropdown），它们内部会调用$('.ui.button').on(...)，但仅限于特定初始化逻辑，不泛化到所有按钮 - 常见错误：以为加了
ui button primary就自动有提交/跳转逻辑，结果表单没 submit，链接没href，JS 也没挂
<button class="ui positive button">保存</button>
<script>
document.querySelector('.ui.positive.button').addEventListener('click', () => {
// 这里得自己写逻辑
});
</script>
ui dropdown 初始化后选项不显示？
Dropdown 需要显式初始化，且 DOM 必须已就绪。常见现象是 HTML 里写了 <div class="ui dropdown">...</div>，但下拉箭头能点、菜单就是不弹出。
- 初始化必须在 DOM 加载完成后执行：
$(document).ready(() => { $('.ui.dropdown').dropdown(); }); - 如果元素是动态插入的（比如 AJAX 渲染），得在插入后单独调用
$('.new-dropdown').dropdown()，不能依赖页面加载时的批量初始化 - Dropdown 内部依赖
text和value属性或<option></option>标签结构，若用自定义 HTML（如带 icon 的<div class="item">），需确保每个 <code>item有data-value，否则选中后get value返回undefined用
ui segment布局时内容被意外截断？ui segment默认设了overflow: hidden，遇到浮动子元素、绝对定位内容、或未清除浮动的网格（ui grid）时，高度塌陷，视觉上像“被切掉”。- 最直接解法：给 segment 加
class="clearing"（触发 BFC）或内联style="overflow: visible" - 更推荐语义化处理：如果里面是
ui grid，确保最后一行加class="row"并用ui clearing segment；如果是自定义浮动布局，用ui stackable grid替代纯 CSS float - 注意兼容性：旧版 Semantic UI（2.4 之前）的
segment对 Flex 布局支持弱，若子元素用了display: flex，可能需额外设min-height: auto
CDN 引入后
$('.ui.modal').modal('show')报modal is not a function这个错误说明 Semantic UI 的 JS 模块没加载，或加载顺序不对。CDN 方式最容易踩坑的是「只引了 CSS，忘了 JS」，或「JS 在 jQuery 之前加载」。
立即学习“前端免费学习笔记（深入）”；
- 必须按顺序引入：先
jQuery（1.9+ 或 3.x），再semantic.min.js（或按需的modal.js），最后才是自定义脚本 - CDN 地址别混用：unpkg、jsDelivr、cdnjs 的路径和版本行为略有差异，例如 jsDelivr 的
@latest可能指向 v2.9，但 modal 的某些 API（如onApprove）在 v2.8 才稳定，v2.7 会静默失败 - 如果用模块打包工具（Webpack/Vite），不要同时用 CDN + npm 包，容易出现两个 jQuery 实例，导致
$().modal在一个实例上注册、另一个实例上调用
事情说清了就结束。语义化标签和交互组件真正难的不是写法，而是哪部分该交由框架接管（比如 dropdown 的键盘导航），哪部分必须自己补全（比如按钮的业务逻辑），边界模糊时最容易反复调试。
- 最直接解法：给 segment 加
