jQuery не работает при первом нажатии, но работает при каждом втором нажатии

Question

Я пытаюсь составить меню ресторана. Я написал функцию, но она не работает при первом нажатии, но с каждым следующим щелчком все в порядке.

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>

Answer 1

Проблема заключается в том, что при загрузке страницы отсутствует атрибут data-clicks на кнопках. Таким образом, при первом нажатии кнопки clicks будет false, поэтому он пытается скрыть содержимое. Вам нужно инвертировать этот флаг, чтобы логи c работали так, как вы хотите, чтобы элемент отображался при первом нажатии:

var clicks = !$(this).data('clicks');    

Вот полный рабочий фрагмент:

jQuery(document).ready(function() {
  $("#menu-options").on('click', '#show-meat', function() {
    var clicks = !$(this).data('clicks');    
    if (clicks) {
      $(".menu-options-choice-veget, .menu-options-choice-vegan").hide("slow");
      $(".menu-options-choice-meat").animate({
        'margin-right': '-800px'
      }, 'slow');
    } else {
      $(".menu-options-choice-veget, .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>
<div class="menu-options-choice-veget">Vegetarian</div>
<div class="menu-options-choice-vegan">Vegan</div>
<div class="menu-options-choice-meat">Meat</div>