问javascript切换方法第二次单击延迟

EN

  const openModal = document.getElementById('mark-as-gift');
  const modalBg = document.querySelector('.addtnew');
  
  openModal.addEventListener('click', openModalBtn);
 
  function openModalBtn() {
     modalBg.classList.toggle('menscart2');
      
  }

  {% if current_variant.available %}
    <!-- GIFT NOTE -->
  <div class="box-mens-wrap1">
    <div class="mark-gift-wrapper mark-gift-wrapper1">
      

      <input type="hidden" name="properties[Mark As Gift]" value="No" style="display:inline-block">
      <input  id="mark-as-gift" type="checkbox" name="properties[Mark As Gift]" value="Yes" style="display:inline-block; vertical-align:">
      <label for="mark-as-gift" style="margin:0;display: inline-block;font-size:1em;font-family: 'proxima-nova', sans-serif !important; padding-top: 10px;"><ls-static-482034>{{'products.product.gift_text_1' | t}}</ls-static-482034></label>
      
        
        
      <div class="line-item-property__field gift_note gift_note1">
        <label for="Gift Note" class="closegift"></label>
        <textarea class="textgift" placeholder="{{'products.product.note_text' | t}}" maxlength="250" id="Gift Note" name="properties[Gift Note]" style="width: 100%;"></textarea>
      </div>
      

    </div>
      <div class="small--one-third medium-up--one-fifth mensqty">
      {%- if settings.quantity_enable and current_variant.available -%}
        
        <div class="product__quantity product__quantity--{{ settings.variant_type }}">
          {%- render 'quantity-input', id: section_id, qty: 1, min: 1 -%}
        </div>
      {%- endif -%}
    </div>
  </div>
    <!-- END gift not -->
  {% else %}
    <div class="prepend-2 append-2 text-center" style="background:#333;padding:10px;">
      <span style="font-size:14px;font-family:'Futura' !important;color:#ccc;"><ls-static-197559>Out of Stock</ls-static-197559></span>
    </div>
  {%- endif -%}
  
  <div id="form-actions" class="grid">

    <div class="grid__item small--two-thirds medium-up--four-fifths menscart">

      {%- liquid
        assign default_text = 'products.product.add_to_cart' | t
        assign button_text = 'products.product.add_to_cart' | t
        if template == 'product.preorder'
          assign default_text = 'products.product.preorder' | t
          assign button_text = 'products.product.preorder' | t
        endif
        unless current_variant.available
          assign button_text = 'products.product.sold_out' | t
        endunless
      -%}

      {% if current_variant.available %}
        <button type="button"
          name="add"
          id="AddToCart-{{ section_id }}"
          class="btn btn--full add-to-cart{% if enable_dynamic_buttons %} btn--secondary{% endif %} addtnew"
          style="background-color: #ffffff !important; width: 100% !important; border: 1px solid #ffffff !important;"
          {% unless current_variant.available %} disabled="disabled"{% endunless %}
          >
          <span id="AddToCartText-{{ section_id }}" data-default-text="{{ default_text }}" class="addtocartknew">
            {{ button_text }}
          </span>
        </button>
      {%- endif -%}

    </div>
  </div>
  
  <!-- Extend -- Add offer element -->
  <div id="extend-offer" class="extend-offer-mens hide"></div>
  <!-- Extend -- End Extend code -->

  <textarea id="VariantsJson-{{ section_id }}" class="hide" aria-hidden="true" aria-label="Product JSON">
    {{ product.variants | json }}
  </textarea>
  {%- if product.options.size > 1 -%}
    <textarea id="CurrentVariantJson-{{ section_id }}" class="hide" aria-hidden="true" aria-label="Variant JSON">
      {{ current_variant | json }}
    </textarea>
  {%- endif -%}
{%- endform -%}



</div>

<!-- Extend -- Load product integration script -->
{% render 'extend-product-integration' %}
<!-- Extend -- End Extend code -->

<style>
  
  
  .mark-gift-wrapper {
  
    margin-bottom: 10px;
  }
  
 
  .box-mens-wrap1 {
  
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
    margin: 0px; 
    
  }
  
  
  
  .mark-gift-wrapper1 {
       outline: 1px solid #fff;
       width: 100%;
       height: 43.5px;
       margin-left: 15px;
       
       
  }
  
  
  .menscart {
    width: 100%;
    padding-bottom: 20px;
    
  }
  
  .menscart2 {
  
     margin-top: 120px;
    transition-duration: 2s;
  }
  

  
  .gift_note1 {
    margin-top: 10px;
    width: 100%;
  }
  
  .textgift2 {
  
    border: none !important;
  }
  
  
  @media (max-width: 768px) {
    .mark-gift-wrapper1 { 
    
        margin-left: 10px;
        
    }
    
   .menscart2 {
  
     margin-top: 110px;
    }
    
  }
  
</style>