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);
    });

编辑：这是我的HTML代码。 它就像这个jquery插件一样 ，其中.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);
});