jQuery技术求助：点击关键词类元素显示对应隐藏内容

嘿，我明白你遇到的麻烦了——点击那个关键词div完全没反应，对吧？咱们来看看代码里的问题，然后快速修复它。

问题出在哪？ #

你的代码里有两个关键错误：

1. 错误使用attr()方法：attr()是用来设置HTML元素的属性（比如src、class）的，但display是CSS样式属性，不能用attr()来修改。
2. 选择器范围错误：$(".Keyword").next(".Content")会选中页面上所有.Keyword后面的.Content，而不是你当前点击的那个关键词对应的描述容器，这不仅逻辑不对，也会导致所有描述一起显示，不是你想要的效果。
3. （额外提醒）最好把JS代码放在DOM加载完成后执行，不然可能元素还没渲染就绑定事件，导致事件无效。

修正后的代码 #

我把你的代码做了调整，主要修改了JavaScript部分，同时保留你原来的HTML和CSS结构：

<html>
<head>
  <style>
    .listWrapper { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); }
    .Keyword { font-family: 'Varela Round', sans-serif; font-weight: bold; padding-bottom: 5px; }
    .Keyword:hover { cursor: pointer; }
    .Content { display: none; }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="listWrapper">
  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>
  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key2</div>
  </div>
  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key3</div>
  </div>
  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key4</div>
  </div>
</div>

<script>
$(document).ready(function() {
  $(".Keyword").click(function() {
    // 用toggle()自动切换显示/隐藏状态，点击一次显示，再点一次隐藏
    $(this).next(".Content").toggle();
    
    // 如果你只想实现点击显示（不想切换隐藏），可以换成下面这行：
    // $(this).next(".Content").show();
  });
});
</script>
</body>
</html>

关键修改点解释 #

• $(document).ready()：确保页面所有DOM元素加载完成后再绑定点击事件，避免因为元素未渲染导致事件绑定失败。
• $(this)：指向当前被点击的.Keyword元素，这样就能精准找到它对应的下一个.Content容器。
• toggle()方法：jQuery提供的便捷方法，自动切换元素的显示/隐藏状态，比手动设置css("display", "block")或css("display", "none")更简洁。如果只需要显示不需要隐藏，就用show()方法。

这样修改后，点击每个关键词，只会显示对应的描述容器，完全符合你的需求啦！

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