jQuery нажмите на огонь при втором щелчке, но не первый

Question

Я проверил некоторые другие потоки, но не могу найти ответ, который идет с моим кодом. Моя проблема заключается в моем щелчке событие срабатывает только на втором клике, в какой момент он работает отлично (второй щелчок открывает, третий щелчок закрывается, четвёртые открывается, и т.д ...)

$('.expand-btn').click(function() { 
     var clicks = $(this).data('clicks'); 
     if (clicks) { 
     $('.expand-wrapper').animate({ 
      right: "0" 
     }, 500, function() { 

     }); 
     } else { 
     $('.expand-wrapper').animate({ 
      right: "-325px" 
     }, 500, function() { 

     }); 
     } 
     $(this).data('clicks', !clicks); 
    }); 

EDIT: Вот мой HTML код , Он работает как this jquery plugin, где .expand-wrapper - это контактная форма, которая скрыта от экрана, и .expand-btn - это маленький лоскут, который находится сбоку от экрана и доступен для просмотра.

<div class="expand-wrapper"> 
    <a href="#" class="expand-btn"><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact</a> 
    <div class="expand-form"> 
     <?php echo do_shortcode('[contact-form-7 id="2173" title="Home 01 Request_no_title"]'); ?> 
    </div> 
</div> 

Answer 1

Это звучит как вопрос, где ваш атрибут data-clicks не инициализирован на вашем элементе (как вы устанавливаете его в конце своего первого щелчка, а затем он, кажется, работает, как ожидалось).

Попробуйте инициализировать его на .expand-btn элемента следующим образом:

<a href="#" class="expand-btn" data-clicks='false'>...</a> 

Или, если у вас есть несколько расширить кнопки элементы, вы можете инициализировать их, когда ваша страница загружается с помощью JQuery:

$(function(){ 
    $('.expand-btn').data('clicks',false); 
});