要解决“按钮不会改变显示的数据和内容类别”的问题，你可以使用以下代码示例：

HTML:

切换类别

  
类别1
  
类别2
  
类别3

JavaScript:

// 获取按钮和类别列表元素
const categoryBtn = document.getElementById('category-btn');
const categoryList = document.getElementById('category-list');

// 监听按钮的点击事件
categoryBtn.addEventListener('click', function() {
  // 切换类别列表的显示状态
  if (categoryList.style.display === 'none') {
    categoryList.style.display = 'block';
  } else {
    categoryList.style.display = 'none';
  }
});

CSS:

#category-list {
  display: none; // 初始化为隐藏状态
}

上述代码示例中，我们首先使用JavaScript获取了按钮和类别列表的元素。然后，我们为按钮添加了点击事件的监听器。当按钮被点击时，我们会检查类别列表的显示状态。如果类别列表当前是隐藏的，我们将其显示出来；如果类别列表当前是显示的，我们将其隐藏起来。通过这种方式，我们可以实现按钮点击时类别列表的显示和隐藏，而不会改变已经显示的数据和内容类别。