将HTML内的<script>代码转换为独立JavaScript函数的技术问询

没问题，这事儿超简单！我帮你把那段内嵌在HTML里的下拉菜单逻辑抽成独立的JavaScript文件，这样你就能在HTML里直接调用，还能复用在多个页面上。

步骤1：创建独立的JS文件 #

新建一个名为dropdown.js的文件，把下面的代码放进去——我把你提到的切换逻辑，加上常见的「点击页面其他区域关闭下拉」的补全逻辑一起写好了：

// dropdown.js
// 切换下拉菜单的显示/隐藏状态
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// 点击页面非下拉按钮区域时，关闭所有打开的下拉菜单
window.addEventListener('click', function(event) {
  // 只在点击的元素不是下拉按钮时执行关闭逻辑
  if (!event.target.matches('.dropbtn')) {
    const dropdowns = document.getElementsByClassName("dropdown-content");
    for (let i = 0; i < dropdowns.length; i++) {
      const openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
});

步骤2：在HTML中引入并调用 #

把原来HTML里的内嵌<script>删掉，换成引入这个独立JS文件的代码，注意要放在下拉菜单的HTML结构之后，或者给<script>加defer属性确保DOM加载完成后再执行：

<header>
  <!-- 你的下拉菜单HTML结构（和原来保持一致就行） -->
  <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">下拉按钮</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">选项1</a>
      <a href="#">选项2</a>
      <a href="#">选项3</a>
    </div>
  </div>

  <!-- 引入独立的JS文件 -->
  <script src="dropdown.js"></script>
</header>

关键注意事项 #

• 文件路径要正确：如果dropdown.js和你的HTML文件在同一个文件夹里，直接写src="dropdown.js"就行；如果放在子文件夹（比如js/）里，要写成src="js/dropdown.js"。
• 保留CSS样式：你原来的.show类样式一定要保留，这是控制下拉菜单显示的核心，示例样式如下：

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content.show {
    display: block;
  }
  

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