jQuery不是在第一次单击时工作,而是在每隔一次单击时工作

我在做餐厅菜单。我写了一个函数,但它不工作的第一次点击,但与每一次点击是确定的。

jQuery(document).ready(function() {
  $("#menu-options").on('click', '#show-meat', function() {
    var clicks = $(this).data('clicks');
    if (clicks) {
      $(".menu-options-choice-veget").hide("slow");
      $(".menu-options-choice-vegan").hide("slow");
      $(".menu-options-choice-meat").animate({
        'margin-right': '-800px'
      }, 'slow');
    } else {
      $(".menu-options-choice-veget").show("slow");
      $(".menu-options-choice-vegan").show("slow");
      $(".menu-options-choice-meat").animate({
        'margin-right': '0px'
      });
    }
    $(this).data("clicks", !clicks);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu" id="menu-options">
  <ul>
    <li><button type="button" class="menu-otpions-button" id="show-meat">Meat</button></li>
    <li><button type="button" class="menu-otpions-button" id="show-veg">Vegetarian</button></li>
    <li><button type="button" class="menu-otpions-button" id="show-vegan">Vegan</button></li>
  </ul>
</div>