HTML内嵌jQuery代码正常，移入.js文件失效，如何修改？

你的问题不是$符号导致的，核心原因是DOM加载时机不匹配：

• 内嵌脚本放在HTML元素之后，执行时页面里的dropSection、childSection等元素已经被浏览器渲染出来，jQuery能正常找到元素并绑定事件。
• 独立JS文件在<head>中引入时，执行时机早于DOM元素加载完成，此时jQuery找不到目标元素，事件绑定自然失效。

解决方法 #

方法1：调整JS文件引入位置 #

把你的个人JS文件移到</body>标签之前引入，确保DOM元素全部加载后再执行JS代码：

<body>
  <!-- 页面所有HTML元素 -->
  <div id="section1" class="dropSection"> 
    <a class="edit top-right">Option 1</a>
    <div class="childSection">
       <div class="splash">item 1</div>
       <div class="splash">item 2</div>
       <div class="splash">item 3</div>
    </div>
  </div>

  <!-- 先引入jQuery，再引入你的JS文件 -->
  <script src="jquery-3.6.1.min.js"></script>
  <script src="你的个人JS文件.js"></script>
</body>

方法2：用jQuery的DOM就绪包裹代码 #

如果必须在<head>中引入JS文件，就把所有代码放在$(document).ready()回调里，确保DOM加载完成后再执行：

$(document).ready(function() {
  $('body').click(function() {
    $('div.childSection').hide();
  });

  $(".dropSection a").click(function(event) {
    var parent = $(this).parent();
    parent.toggleClass("selected");
    parent.find("div.childSection").toggle();
    // 注意：原代码少了类选择器的点，修正为.section-content
    parent.find(".section-content").toggle();
    event.stopPropagation();
  });
});

额外提示：原代码里的parent.find("section-content")是错误的，因为section-content是类选择器，需要加上前缀.，否则会被当成标签名查找，导致这行代码无效。

方法3：使用事件委托（可选） #

如果页面后续会动态添加dropSection元素，推荐用事件委托绑定事件，这样即使元素后添加也能生效：

$(document).ready(function() {
  $('body').click(function() {
    $('div.childSection').hide();
  });

  // 事件委托到body，监听.dropSection a的点击
  $("body").on("click", ".dropSection a", function(event) {
    var parent = $(this).parent();
    parent.toggleClass("selected");
    parent.find("div.childSection").toggle();
    parent.find(".section-content").toggle();
    event.stopPropagation();
  });
});

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