点击图片热点区域(area map)时，如何在对应位置显示div/CSS内容

看起来你已经有了基础的显示切换逻辑，但核心问题是没有将内容定位到点击的热点坐标上。我来帮你完善代码，实现点击热点时在对应位置展示/隐藏指定div的效果：

首先，先确认你的HTML结构大概是这样（如果不是可以调整选择器）：

<!-- 带热点的图片 -->
<img src="your-image-url.jpg" usemap="#image-map" class="list-group">
<map name="image-map">
  <area id="area-1" shape="rect" coords="50,50,150,150" alt="热点区域1">
  <area id="area-2" shape="circle" coords="300,200,60" alt="热点区域2">
</map>

<!-- 对应每个热点的内容容器 -->
<div class="dropdowntest-content area-1">这是热点1的专属内容</div>
<div class="dropdowntest-content area-2">这是热点2的专属内容</div>

然后是CSS部分（补充完整你的样式）：

.dropdowntest-content {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 999; /* 确保内容在最上层 */
}
/* 显示状态的类 */
.dropdowntest-content.show {
  display: block;
}

接下来是关键的JavaScript代码，我修改并增强了你的逻辑：

(function($) {
  // 绑定热点点击事件
  $('.list-group area').on('click', function(e) {
    e.preventDefault(); // 阻止area默认的跳转行为（如果设置了href）
    const targetContent = $('.' + this.id);
    
    // 先隐藏所有其他热点的内容，避免同时显示多个
    $('.dropdowntest-content').not(targetContent).removeClass('show');
    
    // 切换当前内容的显示/隐藏状态
    targetContent.toggleClass('show');
    
    // 如果当前是显示状态，把内容定位到点击的坐标
    if (targetContent.hasClass('show')) {
      // 可以自定义偏移量，防止内容挡住鼠标指针
      const offsetX = 10;
      const offsetY = 10;
      targetContent.css({
        top: `${e.clientY + offsetY}px`,
        left: `${e.clientX + offsetX}px`
      });
    }
  });

  // 点击页面其他区域时，关闭所有显示的内容（提升用户体验）
  $(document).on('click', function(e) {
    const isArea = $('.list-group area').is(e.target);
    const isContent = $('.dropdowntest-content').is(e.target);
    const isContentChild = $('.dropdowntest-content').has(e.target).length > 0;
    
    if (!isArea && !isContent && !isContentChild) {
      $('.dropdowntest-content').removeClass('show');
    }
  });
})(jQuery);

关键改进点说明： #

• 坐标定位：通过e.clientX和e.clientY获取点击的视窗坐标，设置内容容器的top和left，确保内容出现在点击位置附近。
• 排他性显示：点击新热点时自动隐藏其他热点的内容，避免界面混乱。
• 阻止默认行为：如果你的<area>标签设置了href，点击会跳转，用e.preventDefault()阻止这个行为。
• 外部点击关闭：点击页面空白处或其他非热点/非内容区域时，自动隐藏所有内容，符合用户操作习惯。

可选优化：相对于图片定位 #

如果你的图片不是固定在视窗顶部，而是在页面中有偏移，你可以改成相对于图片的位置来计算坐标，这样即使页面滚动，内容也会跟着图片热点走：

// 在设置坐标的地方替换成这段代码
const $img = $('.list-group');
const imgOffset = $img.offset();
// 计算点击位置相对于图片左上角的坐标
const relativeX = e.pageX - imgOffset.left;
const relativeY = e.pageY - imgOffset.top;
// 设置内容位置为图片偏移 + 相对坐标 + 自定义偏移
targetContent.css({
  top: `${imgOffset.top + relativeY + offsetY}px`,
  left: `${imgOffset.left + relativeX + offsetX}px`
});

这样调整后，不管图片在页面的哪个位置，内容都会准确出现在热点点击的位置啦！

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