需求：将鼠标按下（mousedown）触发的下拉显示功能改为点击（onclick）触发

嘿，这事儿超简单的！你不需要懂jQuery，咱们直接改原生JS的事件绑定就行，分分钟搞定。

首先，先理清楚核心问题：你原来绑定了mousedown事件触发下拉，但mousedown是鼠标按下瞬间就触发，而click是“按下+松开”的完整动作，刚好符合你要的点击触发需求。另外，原来的mouseup监听也可以去掉了，因为click事件已经包含了完整的点击流程。

我给你调整后的完整代码，还顺便修复了一个小bug（原来的start + 100会变成字符串拼接，比如"10px"+100会得到"10px100"，这肯定不符合预期）：

<script> 
var div = document.getElementById("drag"); 
var outer = document.getElementById("container"); 
// 把top值转成数字，避免字符串拼接的问题，默认0如果元素没设置top的话
var startPos = parseInt(div.style.top) || 0; 
var endPos = startPos + 100;
var isExpanded = false; // 用来记录当前下拉菜单是展开还是收起

window.onload = addListeners; 

function addListeners() { 
  // 把原来的mousedown换成click事件，绑定切换展开/收起的函数
  div.addEventListener('click', toggleDropdown, false); 
  // 移除window上的mouseup监听，因为click事件不需要这个了
}

function toggleDropdown() {
  if (isExpanded) {
    // 如果已经展开，就恢复到初始位置
    div.style.top = startPos + 'px';
  } else {
    // 如果没展开，就下拉到目标位置
    div.style.top = endPos + 'px';
  }
  // 切换状态，下次点击就会执行相反的操作
  isExpanded = !isExpanded;
}
</script>

关键修改点： #

• 事件替换：把div.addEventListener('mousedown', mouseDown, false)改成了div.addEventListener('click', toggleDropdown, false)，用click事件触发下拉/收起的切换。
• 修复数值计算：用parseInt把div.style.top转成数字，避免字符串拼接的错误。
• 状态切换逻辑：新增了isExpanded变量，实现点击一次展开、再点击一次收起的交互效果（如果你的需求是点击一次只展开、不需要收起，那可以去掉这个变量，直接只设置div.style.top = endPos + 'px'就行）。
• 移除多余监听：删掉了window.addEventListener('mouseup', mouseUp, false)，因为click事件已经包含了松开的动作，不需要单独监听。

如果你的原来的mouseDown函数里有其他拖拽相关的逻辑，随时告诉我，我再帮你调整！

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