点击按钮显示Bootstrap折叠div失败及报错问题排查

咱们先拆解你遇到的两个核心问题：

一、为什么会抛出Uncaught TypeError: $(...).removeClass is not a function？ #

这个错误本质是代码里的$并非jQuery的函数，导致没法调用jQuery专属的removeClass方法，常见诱因有这几个：

• jQuery未正确加载：你得确保在自定义的点击事件代码之前，已经加载了jQuery库。比如如果你的脚本写在<head>里，jQuery必须先加载；如果放在body末尾，也要把jQuery放在你的代码前面。
• JS库冲突：如果页面里还有其他库（比如Zepto、MooTools）也用$作为标识符，就会和jQuery抢占这个符号，导致$指向了其他库的函数。
• 误操作原生DOM对象：比如你用document.querySelector拿到了DOM元素，直接调用.removeClass()，但原生DOM根本没有这个方法，必须把它包装成jQuery对象才行（比如$(document.querySelector('.container.collapse'))）。

对应解决办法： #

1. 检查jQuery的引入顺序，确保它在你的自定义JS代码之前加载完成。
2. 如果是库冲突，要么改用jQuery代替$编写代码，要么开启jQuery的noConflict模式：

   jQuery.noConflict();
   jQuery('.container.collapse').removeClass('collapse');
   

3. 确认你操作的是jQuery对象，而非原生DOM元素。

二、为什么修改类后div仍未显示？ #

你的类操作代码存在两个关键错误：

• 选择器写法错误：$('.container collapse')这个写法是查找.container下的<collapse>标签，而你要定位的是同时拥有container和collapse类的元素，正确选择器应该是.container.collapse（两个类名之间无空格）。
• 类名带了多余的点：removeClass('.container collapse')里的类名不需要加.，而且你完全没必要移除container类——元素本身就带有这个类，移除后再添加回去纯属多余，反而可能引发问题。

另外，Bootstrap的collapse类本身就是用来隐藏元素的，你只需要移除这个类，元素自然就会显示，不需要额外添加container类。

正确的点击事件代码： #

// 假设触发按钮的id为showContainerBtn
$('#showContainerBtn').click(function() {
  $('.container.collapse').removeClass('collapse');
});

如果你的项目基于Bootstrap开发，更推荐用它自带的collapse组件方法来控制显示，代码更规范还能自带过渡动画：

$('#showContainerBtn').click(function() {
  $('.container.collapse').collapse('show');
});

内容的提问来源于stack exchange，提问作者Hardeep Singh Negi