Question

我想只调用一个结账 - 主动和虚拟网格 - 在时间突出显示。

它正常工作你可以打开它们，它们将全部显示在彼此之上。所以我需要使用prevent动作：如果一个已经打开并且你打开一个新动作，那么你关闭旧的并打开新的动作。

<div class="checkout">
  <a class="checkout__button" href="#">
    <!-- Fallback location -->
    <span class="checkout__text">
      <span class="checkout__text-inner checkout__initial-text">Testn</span>
    <span class="checkout__text-inner checkout__final-text"> </span>

    </span>
  </a>
  <div class="checkout__order">
    <div class="checkout__order-inner">
      <h1>test</h1>
      <p>
        test
      </p>
      <table class="checkout__summary">
        <thead>
          <tr>

            <th>QTY</th>
            <th>Price</th>
            <th>&nbsp;</th>
          </tr>
        </thead>

      </table>
      <!-- /checkout__summary -->
    </div>
    <!-- /checkout__order-inner -->
  </div>
  <button class="checkout__close checkout__cancel">Close</button>
  <!-- /checkout__order -->
</div>

(function() {
  var dummy = document.getElementById('dummy-grid');
  [].slice.call(document.querySelectorAll('.checkout')).forEach(function(el) {
    var openCtrl = el.querySelector('.checkout__button'),
      closeCtrl = el.querySelector('.checkout__cancel');

    openCtrl.addEventListener('click', function(ev) {
      ev.preventDefault(removeEventListener);
      classie.add(el, 'checkout--active');
      classie.add(dummy, 'dummy-grid--highlight');
    });

    closeCtrl.addEventListener('click', function() {
      classie.remove(el, 'checkout--active');
      classie.remove(dummy, 'dummy-grid--highlight');
    });
  });
})();

var classie = { // full names   
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass, // short names   
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport 
if (typeof define === 'function' && define.amd) {
  // AMD   
  define(classie);
} else {
  // browser global   
  window.classie = classie;
}

我一直在努力这么久，我不知道我将如何解决这个问题。救命？

我想只打电话给一个活动

0 个答案: