如何隐藏单击下一个div时打开的最后一个div？

Question

单击下一个div时，如何关闭打开的最后一个div？当您单击下一个div时，打开的最后一个div也将保持打开状态。

CODEPEN演示

<div class="popup-window lot-1">
  <a href="/for-sale/show/1">Lot Number: 1</a>
  <h5>Section Size: 500</h5>
  <button class="close-button">Close</button>
</div>

<div class="popup-window lot-2">
  <a href="/for-sale/show/2">Lot Number: 2</a>
  <h5>Section Size: 600</h5>
  <button class="close-button">Close</button>
</div>

<div class="popup-window lot-3">
  <a href="/for-sale/show/3">Lot Number: 3</a>
  <h5>Section Size: 450</h5>
  <button class="close-button">Close</button>
</div>

JS:

$(document).ready(function() {
  $('.section').on('click', function(event) {
    var sectionID = $(this).attr('id');
    // Select the relevant popup window that has the same ID as the sectionID
    var popupWindow = $('.popup-window.lot-' + sectionID);
    popupWindow.show();
    var leftPos = $(this).position().left;
    var topPos = $(this).position().top;
    popupWindow.css('top', topPos - 200).css('left', leftPos - 100).show();
  });

  $('.close-button').click(function(event) {
    $('.popup-window').hide();
  });

}); 

CODEPEN演示

Answer 1

只需隐藏弹出窗口，该窗口不是当前窗口

$('.popup-window').not(popupWindow).hide();

​

$(document).ready(function() {
  $('.section').on('click', function(event) {
    var sectionID = $(this).attr('id');
    // Select the relevant popup window that has the same ID as the sectionID
    var popupWindow = $('.popup-window.lot-' + sectionID);
    popupWindow.show();
    $('.popup-window').not(popupWindow).hide();
    var leftPos = $(this).position().left;
    var topPos = $(this).position().top;
    popupWindow.css('top', topPos - 200).css('left', leftPos - 100).show();
  });

  $('.close-button').click(function(event) {
    $('.popup-window').hide();
  });

});

.st0 {
  fill: #C1C1C0;
}
.st1 {
  fill: #0FB5CB;
}
.st2 {
  fill: #46B649;
}
body {
  position: relative;
  marign, padding: 0;
}
.popup-window {
  width: 400px;
  height: 200px;
  background: #accee2;
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup-window lot-1"> <a href="/for-sale/show/1">Lot Number: 1</a>
  <h5>Section Size: 500</h5>
  <button class="close-button">Close</button>
</div>
<div class="popup-window lot-2"> <a href="/for-sale/show/2">Lot Number: 2</a>
  <h5>Section Size: 600</h5>
  <button class="close-button">Close</button>
</div>
<div class="popup-window lot-3"> <a href="/for-sale/show/3">Lot Number: 3</a>
  <h5>Section Size: 450</h5>
  <button class="close-button">Close</button>
</div>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
  <g id="Layer_1">
    <polygon class="st0" points="76.6,96.1 745.6,96.1 745.6,543.7 188.3,543.7 	" />
  </g>
  <g id="landmarks-test">
    <rect id="1" x="495.2" y="130.6" class="section" width="233.1" height="83.4" />
    <rect id="2" x="495.2" y="235.4" class="section" width="233.1" height="95.9" />
    <rect id="3" x="495.2" y="345.8" class="section" width="233.1" height="84.1" />
</svg>

​