jQuery不处理第一次单击，而是处理每隔一次单击

我在试着做餐厅菜单。我写了一个函数，但第一次点击时它不起作用，但每次点击都可以

jQuery（文档）.ready（函数（）{
$（“#菜单选项”）。在（'单击'，'显示肉类'，函数（）上{
var clicks=$（this.data（'clicks'）；
如果（单击）{
$（“.menu-options-choice-veget”）.hide（“slow”）；
$（“.menu-options-choice-vegan”）.hide（“slow”）；
$（“.menu-options-choice-meat”）.animate({
“右边距”：“-800px”
}“慢”）；
}否则{
$（“.menu-options-choice-veget”）.show（“slow”）；
$（“.menu-options-choice-vegan”）.show（“slow”）；
$（“.menu-options-choice-meat”）.animate({
“右边距”：“0px”
});
}
$（this）.data（“单击”，！单击）；
});
});


肉
素食者
素食主义者

问题是因为加载页面时按钮上没有
数据单击
属性。因此，当您第一次单击按钮时，
单击
将为
假
，因此它会尝试隐藏内容。需要反转此标志，逻辑才能按预期工作，因此第一次单击时会显示元素：

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

以下是完整的工作片段：


jQuery（文档）.ready（函数（）{
$（“#菜单选项”）。在（'单击'，'显示肉类'，函数（）上{
var clicks=！$（this.data（'clicks'）；
如果（单击）{
$（“.menu-options-choice-veget，.menu-options-choice-vegan”）.hide（“slow”）；
$（“.menu-options-choice-meat”）.animate({
“右边距”：“-800px”
}“慢”）；
}否则{
$（“.menu-options-choice-veget，.menu-options-choice-vegan”）.show（“slow”）；
$（“.menu-options-choice-meat”）.animate({
“右边距”：“0px”
});
}
$（此）。数据（“点击”，点击）；
});
});


肉
素食者
素食主义者

素食主义者
素食主义者
Meat
您的
#show Meat
元素没有
数据点击
属性。@RoryMcCrossan jQuery的
数据
函数不需要
数据xxx
属性，它有自己的实现。因此，默认情况下，该值为
false
。