NetSuite已保存搜索中JS折叠元素仅隔行生效问题求助

问题描述 #

将折叠元素集成至NetSuite已保存搜索后，出现仅隔行能正常触发折叠功能的异常。推测成因可能为行高异常，或偶数行的JS代码被触发两次toggle操作。

相关代码 #

JavaScript #

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

CSS #

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 250px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 9px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

.collapsible:after {
  content: "\002B";
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 2px;
}

.active:after {
  content: "\2212";
}

HTML #

<button type="button" class="collapsible">TAL Drop Info</button>
<div class="content">
  <span class="gsub">FIRST NAME:</span><br> '||{contactprimary.firstname}||'
</div>
<hr>
<button type="button" class="collapsible">TAL Drop Info</button>
<div class="content">
  <span class="gsub">FIRST NAME:</span><br> '||{contactprimary.firstname}||'
</div>
<hr>
<button type="button" class="collapsible">TAL Drop Info</button>
<div class="content">
  <span class="gsub">FIRST NAME:</span><br> '||{contactprimary.firstname}||'
</div>
<hr>
<button type="button" class="collapsible">TAL Drop Info</button>
<div class="content">
  <span class="gsub">FIRST NAME:</span><br> '||{contactprimary.firstname}||'
</div>

解决方案 #

1. 改用事件委托避免重复绑定 #

原代码通过循环给每个.collapsible元素绑定点击事件，若NetSuite环境中代码被重复执行（比如页面动态渲染多次），会导致同一元素被绑定多个点击事件，触发多次toggle从而抵消效果。改用事件委托可从根源解决这个问题：

document.addEventListener('DOMContentLoaded', function() {
  // 绑定事件到document，通过事件冒泡判断目标元素
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('collapsible')) {
      const btn = e.target;
      btn.classList.toggle('active');
      // 确保正确获取对应的content元素
      let content = btn.nextElementSibling;
      if (!content || !content.classList.contains('content')) {
        // 若中间存在NetSuite自动插入的元素，尝试从父节点查找
        content = btn.parentElement.querySelector('.content');
      }
      if (content) {
        if (content.style.maxHeight) {
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + 'px';
        }
      }
    }
  });
});

2. 确保JS代码仅执行一次 #

在NetSuite中，需确认代码的加载方式：

• 避免将JS代码放在会重复渲染的区域（比如已保存搜索的每行模板中）
• 使用DOMContentLoaded包裹代码，确保仅在DOM加载完成后执行一次

3. 验证HTML结构一致性 #

NetSuite可能会自动为已保存搜索的行插入额外元素，导致nextElementSibling无法正确定位到.content。可通过浏览器开发者工具检查实际渲染后的DOM结构，调整content元素的获取逻辑，比如使用closest或querySelector从父节点精准查找。

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