Question

我有一个弹出窗口，当我单击某些按钮时应该显示该窗口，一切似乎都很好，但是当我单击按钮时，弹出窗口迅速消失了，很奇怪的是我在另一部分中有另一个类似的元素我的网站，它可以正常运行，但是此网站无法正常工作。

这里是指向代码笔的链接，可以使您更好地了解https://codepen.io/CodingGilbert/pen/NzQmpL

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>

Answer 1

问题在这里：

        <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>

您需要将href属性设置为href="#"，因为每次单击该元素页面时都会刷新href=""。另一种选择是添加return false以跨越onclick事件：

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

弹出窗口迅速消失

1 个答案: