Javascript 弹出窗口很快消失

我有一个弹出窗口，当我点击某个按钮时，它应该会显示出来，一切似乎都正常，但当我点击按钮时，弹出窗口很快就消失了，奇怪的是，我在我的网站的另一个部分有另一个类似的元素，它工作得非常好，但这个不工作

这里有一个代码笔的链接，以便更好地理解

html结构：

<main>
    <section class="products-container container">
      <nav class="categories">
        <span class="categories__link" id="accesories">Accesories</span>
        <span class="categories__link">Bottoms</span>
        <span class="categories__link">Dresses + Jumpsuits</span>
        <span class="categories__link">Outerwear</span>
        <span class="categories__link">Tops</span>
        <span class="categories__link">— Sale</span>
      </nav>
      <div class="products">
        <a href="" class="shop-item">
          <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=2500w" class="shop-item__img">
          <div class="quickview">
            <span class="quickview__icon">Quick View</span>
            <span class="quickview__info">Haori-jacket<br><span class="quickview__info--price">$210.00</span></span>
          </div>
        </a>
        <a href="" class="shop-item">
          <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=2500w" class="shop-item__img">
        </a>
        <a href="" class="shop-item">
          <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=2500w" class="shop-item__img">
        </a>
        <a href="" class="shop-item">
          <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=2500w" class="shop-item__img">
        </a>
        <a href="" class="shop-item">
          <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=2500w" class="shop-item__img">
        </a>
      </div>
    </section>

    <!-- Popup Shop Item -->

    <div class="popup-item">
      <div class="wrapper-item">
        <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=2500w" class="shop-item__img" class="wrapper-item__img">
        <div class="product-info">
          <h2 class="heading-secondary">Haori jacket</h2>
          <span class="product-info__price">$210.00</span>
          <p class="product-info__text">Sed ornare tellus non lectus blandit faucibus. Curabitur convallis nibh ut libero lobortis ullamcorper. Aliquam ornare risus in orci iaculis egestas. Vivamus varius ipsum eu leo ...</p>
          <div class="detail-group">
            <p class="detail-group__span">Size:</p>
            <select class="detail-group__size">
              <option value="">Select Size</option>
              <option value="0">0</option>
              <option value="2">2</option>
              <option value="4">4</option>
              <option value="6">6</option>
              <option value="8">8</option>
            </select>
          </div>
          <div class="detail-group">
            <p class="detail-group__span">Quantity:</p>
            <input class="detail-group__quantity" max="9999" min="1" value="1" type="number">
          </div>
            <button type="button" class="btn btn--form btn--form--shop">Add to cart</button>
            <a href="" class="btn-view">View Full Item</a>
        </div>
      </div>
      <span class="popup__close-icon" id="closeIcon">&times;</span>
    </div>
  </main>

问题在于：

        <a href="" class="shop-item">
          <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=2500w" class="shop-item__img">
          <div class="quickview">
            <span class="quickview__icon">Quick View</span>
            <span class="quickview__info">Haori-jacket<br><span class="quickview__info--price">$210.00</span></span>
          </div>
        </a>

---

天啊。。。我不敢相信这么简单的事情会给我带来这么多麻烦。。。但我应该只瞄准quickview按钮，为什么会发生这种情况？顺便说一句，谢谢你，这解决了我的问题，非常感谢！之所以会发生这种情况，是因为它位于元素内部，当您单击“跨距”时，两个事件都会触发

$('.quickview__icon').click(function (){
    $('footer').css('display', 'none');
    $('.popup-item').css({'opacity': '1', 'visibility': 'visible'});
    return false;
});