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>

问题是因为没有 data-clicks clicks 将 false ,所以它试图隐藏内容。需要反转此标志,逻辑才能按预期工作,因此第一次单击时会显示元素:

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>