如何基于区域坐标显示div？点击触发显示功能失效求助

让我来帮你一步步排查和解决这个问题～

可能的问题点及修复方案 #

1. jQuery 未正确引入

你提供的 jQuery 引入标签不完整，这会导致所有 jQuery 代码无法执行。请替换为完整的 CDN 地址：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

2. 类名不匹配问题

你的 CSS 定义的是 .dropdowntest-content 类，但 JS 代码中使用的是 .hide 类来控制显示隐藏。需要确保目标 div 同时包含这两个类（或者统一类名）：

<!-- 示例DOM结构 -->
<div class="list-group">
  <a href="#" id="content1">点击显示内容1</a>
  <a href="#" id="content2">点击显示内容2</a>
</div>

<!-- 关联的div需要同时有hide和对应id的class -->
<div class="dropdowntest-content hide content1">内容1的内容</div>
<div class="dropdowntest-content hide content2">内容2的内容</div>

3. 动态元素的事件委托（如果a标签是动态生成的）

如果你的 .list-group a 是通过 JS 动态添加到页面的，直接绑定 click 事件会失效，需要改用事件委托：

$(function() {
  // 委托到父元素或document
  $(document).on('click', '.list-group a', function(e) {
    e.preventDefault();
    $('.hide').hide();
    $('.' + this.id).show();
  });
});

4. 验证选择器是否正确

可以在点击事件中添加调试代码，确认是否能正确获取到目标元素：

$(function() {
  $('.list-group a').on('click', function(e) {
    e.preventDefault();
    console.log('当前点击的a标签ID:', this.id);
    console.log('找到的目标div:', $('.' + this.id)); // 如果输出长度为0，说明类名不匹配
    $('.hide').hide();
    $('.' + this.id).show();
  });
});

完整可运行示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .dropdowntest-content {
      position: absolute;
      display: none;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 16px;
      z-index: 1;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
  <div class="list-group">
    <a href="#" id="content1">点击显示内容1</a>
    <a href="#" id="content2">点击显示内容2</a>
  </div>

  <div class="dropdowntest-content hide content1">这是内容1的详细信息</div>
  <div class="dropdowntest-content hide content2">这是内容2的详细信息</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('.list-group a').on('click', function(e) {
        e.preventDefault();
        $('.hide').hide();
        $('.' + this.id).show();
      });
    });
  </script>
</body>
</html>

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