为何显示隐藏section的功能无法正常生效？

咱们先揪出代码里的两个关键问题：

• 多余的if包裹事件绑定：你用if($("#btn").click(...))的写法完全没必要，click()本身就是用来绑定点击事件的API，不需要套if判断，这种冗余写法反而可能干扰事件绑定的逻辑。
• 没等DOM加载完成就执行代码：如果你的JS代码写在<head>里或者页面元素之前，那$("#btn")和$("#sction")根本找不到对应的DOM元素，事件自然绑定不上，功能也就失效了。

修正后的代码 #

最稳妥的做法是把代码放在DOM就绪的回调里，确保页面所有元素都渲染完成后再执行逻辑：

$(document).ready(function() {
  $("#btn").click(function() {
    $("#sction").show();
  });
});

要是你的JS代码是放在</body>标签的前面（也就是页面最后），也可以简化成下面这样，因为这时候DOM已经加载得差不多了：

$("#btn").click(function() {
  $("#sction").show();
});

另外顺便提一句：你section的id是sction（少了个字母e），如果这是手滑写错的，记得把HTML和JS里的id名称统一修正，不然也会出现找不到元素的情况哦。

验证效果 #

修正之后，点击按钮的流程就正常了：

1. jQuery找到id为btn的按钮
2. 触发点击事件时，定位到id为sction的section
3. 调用show()方法把它的display样式从none改成默认值，section就显示出来啦

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