如何根据区域坐标显示 div

Question

我有一个问题，我正在尝试在单击时将div分配给特定区域坐标并显示它。但是不起作用。

$(function() {
  $('.list-group a').on('click', function(e) {
    e.preventDefault();
    $('.hide').hide();
    $('.' + this.id).show();
  });
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<map class="list-group" name="map"> 
    <area id="section-1" class="list-group-item" shape="rect" 
    coords="198,368,142,337" href="#section-1" />
</map>
<img alt="Picture1" src="http://via.placeholder.com/680x466/444444/DDDDDD?text=Placeholder"
    width="680" height="466" usemap="map" data-cms="{'contentId':95875}" />`
<div class="dropdowntest-content hide section-1">
  <p>Hello
  </p>
</div>

Answer 1

你的代码中有几个错误。

首先是img标签没有使用地图，因为它在use-map: #map中缺少#。

您也不必要地在点击时隐藏了div。您引用的a标签不存在。

(function($) {
  $('.list-group area').on('click', function(e) {
    $('.' + this.id).toggleClass('show');
  });
})(jQuery);

.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: 10;
  top: 0;
  left: 0;
}
.show {
  display: block;
}
area {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<map class="list-group" name="map"> 
    <area id="section-1" class="list-group-item" shape="rect" 
    coords="0,0,200,200" />
</map>
<img alt="Picture1" src="https://placehold.it/680x466" height="466" width="680" usemap="#map" data-cms="{'contentId':95875}" />
<div class="dropdowntest-content section-1">
  <p>Hello
  </p>
</div>

Answer 2

$(function() {
  $('.list-group area').on('click', function(e) {    
    e.preventDefault();
    var position = $(this).offset();
    $('.hide').css({
      left: position.left,
      top: position.top
     }).show();
  });
});

.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;
}
area,
area:link,
area:hover,
area:active,
area:focus {
  outline: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img alt="Picture1" src="https://picsum.photos/466/680" height="466" width="680" usemap="#map" data-cms="{'contentId':95875}" />
<map class="list-group" name="map"> 
    <area id="section-1" class="list-group-item" shape="poly" coords="30,100, 140,50, 290,220, 180,280" href="#section-1" />
</map>
<div class="dropdowntest-content hide section-1">
  <p>Hello
  </p>
</div>

Answer 3

您可以编辑代码以适合您的解决方案。

.CSS

#container {
    width: 500px;
    height: 500px;
    border: 1px solid gray;
  }
  .hide {
    display: none;
  }
  .dropdowntest-content {
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    border: 1px solid lightgray;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }

JAVASCRIPT

//get element that contain the map
    var target = document.getElementById("container");
    var dropdown = document.getElementById("dropdownmenu");
    //listen to user mouse click
    target.addEventListener("contextmenu", function(e){
      e.preventDefault();
      //click mouse position relative to container
      var clk_x_pos = e.pageX - e.currentTarget.offsetLeft;
      var clk_y_pos = e.pageY - e.currentTarget.offsetTop;
      //position the drop down menu
      dropdown.setAttribute(
        "style", "top: " + clk_y_pos + "px; left: " + clk_x_pos + "px;"
      );
      //display the menu
      dropdown.setAttribute("class", "dropdowntest-content section-1");
      //prevent the default from showing
      return false;
    }, false);
    //hide the drop down menu
    target.addEventListener("mousedown", function(e){
      //hide drop down menu
      dropdown.setAttribute("class", "dropdowntest-content hide section-1");
    }, false);

.HTML

<div id="container">
  <!--Place your map here or remove the div element with id "container" and add that id to your map-->
  <div id="dropdownmenu" class="dropdowntest-content hide section-1">
    <p>Hello</p>
  </div>
</div>