javascript - 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 代码。它的工作原理类似于 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);
});