如何修复"details“标签中嵌套分组符号的错误显示？

<details>
  <summary>点击查看详情</summary>
  这里是详细内容 (包含分组符号) {示例}
</details>

details {
  display: block; /* 确保显示为块级元素 */
}
summary {
  cursor: pointer; /* 改变鼠标指针为手形 */
}

<details>
  <summary>点击查看详情</summary>
  这里是详细内容 (包含分组符号) {示例}
</details>

<script>
  // 兼容性处理
  if (!('open' in document.createElement('details'))) {
    var details = document.querySelectorAll('details');
    details.forEach(function(detail) {
      var summary = detail.querySelector('summary');
      var content = detail.querySelector('div');
      summary.addEventListener('click', function() {
        content.style.display = content.style.display === 'block' ? 'none' : 'block';
      });
    });
  }
</script>

<details>
  <summary>点击查看详情</summary>
  这里是详细内容 (&#40;包含分组符号&#41;) &#123;示例&#125;
</details>