如何实现点击按钮切换无序列表(ul)的显示/隐藏状态

先修正原有HTML的基础问题 #

你原有代码里有两个基础问题需要先调整：

1. 按钮的onclick属性只写了函数名show，没有加执行括号，无法正确触发事件
2. 无序列表默认没有初始隐藏状态，不符合点击后才切换显示的交互逻辑

修正后的基础HTML结构如下：

<body>
  <h3 class="paragraph">
    Remove the duplicates in 2 Javascript arrays (found in readme), add the results to an array and output the list of distinct names in an unordered list below this paragraph when 
    <button type="button" id="btnID" class="javabutton">this link</button> 
    is clicked. If the operation has been completed already, notify the user that this has already been done.
  </h3>
  <!-- 初始加hidden类默认隐藏列表 -->
  <ul class="javalist hidden" id="javalist"></ul>

  <style>
    .hidden { display: none; }
  </style>
</body>

注：我移除了你原来写在ul里的静态li，因为需求要求首次点击时动态渲染去重后的姓名列表，不需要提前写死静态内容

核心逻辑实现规则 #

整个功能按以下逻辑编写即可：

• 定义布尔状态位，标记去重渲染操作是否已经执行过
• 监听按钮点击事件，每次点击先切换ul的hidden类，实现显隐切换
• 首次点击时：
  • 取出readme中的两个待去重数组，合并后用Set做去重处理
  • 遍历去重后的结果，生成对应的li元素插入到ul中
  • 把状态位设为已完成
• 非首次点击时：弹出/在页面显示提示，告知用户去重操作已经完成，当前只是切换列表显隐

完整JS代码 #

把下面这段代码放在</body>标签前即可运行，数组部分替换成你readme里的实际数据即可：

// 替换为readme中的两个实际数组即可，以下为演示用示例数组
const readmeArr1 = ["Matt Johnson", "Bart Paden", "Ryan Doss", "Test Duplicate"];
const readmeArr2 = ["Jared Malcolm", "Jordan Heigle", "Tyler Viles", "Test Duplicate"];

const toggleBtn = document.getElementById('btnID');
const nameList = document.getElementById('javalist');
let isProcessed = false; // 去重操作完成标记

toggleBtn.addEventListener('click', function() {
  // 先切换列表显隐状态
  nameList.classList.toggle('hidden');

  if (!isProcessed) {
    // 首次点击执行数组合并去重
    const distinctNames = [...new Set([...readmeArr1, ...readmeArr2])];
    // 渲染去重后的列表
    nameList.innerHTML = distinctNames.map(name => `<li>${name}</li>`).join('');
    isProcessed = true;
  } else {
    // 非首次点击提示用户
    alert('去重操作已完成，当前仅切换列表显示/隐藏状态');
    // 不想用alert的话也可以换成页面内自定义提示条，逻辑一致
  }
})

实现说明 #

• 数组去重采用ES6原生Set数据结构实现，不需要额外写循环判断，代码简洁性能好
• 显隐切换通过操作CSS类实现，比直接修改内联样式更方便后续维护调整样式
• 状态标记isProcessed在首次渲染完成后置为true，后续点击不会重复执行去重和列表渲染逻辑，完全匹配需求要求

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