dataview中使用js动态修改css样式不生效 有大佬帮忙看看是哪里写的有问题，还是调用方式不对？

疑问解答
1

js文件

function toggleContent(title) {
  debugger
    var content = title.nextElementSibling;
    console.log(title.querySelector('.triangle'))
    if (content.classList.contains('show')) {
      content.classList.remove('show');
      title.querySelector('.triangle').style.transform = 'rotate(0deg)';
    } else {
      content.classList.add('show');
      title.querySelector('.triangle').style.transform = 'rotate(180deg)';
    }
  }

function foo() {
  dv.el("button", "-8").onclick = () => {
      console.log(`按钮被点击了`)
      var content = document.querySelector(".collapsible-title")
      debugger
      toggleContent(content)
  }
}

foo()

css文件

  .collapsible-title {
    cursor: pointer;
    user-select: none; /* Prevents text selection on click */
  }

  .triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #007bff; /* Blue color for the triangle */
    display: inline-block;
    margin-right: 5px;
  }

  .collapsible-content {
    display: none; /* Hides content by default */
    margin-top: 15px;
  }

  .show {
    display: block; /* Shows content when clicked */
  }

代码如上，我想达到点击小三角隐藏相关内容的效果，html中已经实现，然后dataview中代码也都走了，但是不生效

html内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapsible Section with CSS and JavaScript</title>
<style>
  .collapsible-title {
    cursor: pointer;
    user-select: none; /* Prevents text selection on click */
  }

  .triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #007bff; /* Blue color for the triangle */
    display: inline-block;
    margin-right: 5px;
  }

  .collapsible-content {
    display: none; /* Hides content by default */
    margin-top: 15px;
  }

  .show {
    display: block; /* Shows content when clicked */
  }
</style>
</head>
<body>

<div class="collapsible">
  <div class="collapsible-title" onclick="toggleContent(this)">
    <span class="triangle"></span> Title
  </div>
  <div class="collapsible-content">
    <p>Content goes here. Click the title to toggle the content.</p>
  </div>
</div>

<script>
function toggleContent(title) {
  var content = title.nextElementSibling;
  if (content.classList.contains('show')) {
    content.classList.remove('show');
    title.querySelector('.triangle').style.transform = 'rotate(0deg)';
  } else {
    content.classList.add('show');
    title.querySelector('.triangle').style.transform = 'rotate(180deg)';
  }
}
</script>

</body>
</html>