jQuery .toggle()方法使用问题：按钮无法控制div显示隐藏

嘿，我一眼就揪出你的问题啦——这是个新手常踩的小坑，咱们一步步把它搞定！

核心问题：jQuery代码执行时机错了 #

你现在的代码里，自定义的jQuery脚本写在了jQuery库引入的前面！浏览器是从上到下解析HTML的，当它执行$(document).ready(...)这段代码时，jQuery还没加载进来，$这个jQuery的核心变量根本不存在，自然没法触发.toggle()功能。

修正后的完整代码 #

把jQuery库的<script>标签移到你的自定义脚本前面，让浏览器先加载jQuery，再执行你的逻辑：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $("#show").click(function() { 
    $("#prout").toggle(); 
  }); 
}); 
</script>

<div id="prout" class="fichier1"> 
  <div class="droite1">droite</div> 
  <div class="gauche1">gauche</div> 
</div> 

<button id="show" class="btna poz2">arme 2</button>

关于你尝试的原生JS写法的问题 #

你写的document.style.visibility="hidden"是错误的，正确姿势是先获取目标元素，再修改它的样式属性：

• 如果要隐藏元素但保留它的占位空间：

  document.getElementById('prout').style.visibility = 'hidden';
  // 显示回来就改成 'visible'
  

• 如果要像.toggle()那样切换元素的显示/隐藏（隐藏后不占空间），应该修改display属性：

  const elem = document.getElementById('prout');
  elem.style.display = elem.style.display === 'none' ? 'block' : 'none';
  

额外检查点 #

如果修正顺序后还是没效果，可以排查这两点：

• 确认#prout元素的CSS初始display值不是none之外的特殊值（比如flex），如果是，也可以用.toggle('flex')指定对应的显示模式。
• 打开浏览器控制台（按F12），看看有没有报错，比如元素id拼写错误（你这里id是prout和show，看起来没问题，但要确保没有大小写错误）。

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