Semantic UI侧边栏不生效报sidebar is not a function如何解决

问题修复方案 #

核心问题1：选择器不匹配 #

你使用的JS代码照搬了官网示例的类名筛选规则，但你的HTML结构中没有添加.context、.example这两个官网示例自定义的外层容器类，导致选择器无法匹配到对应的侧边栏、菜单元素。

核心问题2：JS执行时机错误 #

你将JS代码放在head标签内引入的main.js中，若代码没有包裹DOM加载完成的监听逻辑，执行时页面DOM还未渲染完成，也会导致功能失效。 #

修正后的JS代码 #

直接替换main.js中的原有代码即可：

// 等待DOM全部渲染完成后执行逻辑
$(function() {
  $('.ui.sidebar')
    .sidebar({
      context: $('.bottom.segment')
    })
    .sidebar('attach events', '.ui.menu .item');
})

额外报错排查（针对$(...).sidebar is not a function） #

如果替换代码后仍然抛出该错误，按以下两点排查：

• 检查页面是否重复引入了jQuery：如果在semantic.min.js之后又引入了一次jQuery，会覆盖之前jQuery上挂载的Semantic UI扩展方法，删除重复的jQuery引入即可，你当前的引入顺序（jQuery在前，semantic.min.js在后）是正确的。
• 打开Chrome DevTools的「网络」面板，确认semantic.min.js的请求状态为200，没有被网络或者浏览器插件拦截导致加载失败。

内容的提问来源于stack exchange，提问作者John Kim