我有一个免责声明div,我想在单击某个菜单项时显示该免责声明div。我让我的 Jquery 使用此脚本正确显示我的隐藏div: $(function(){
var $allItems = $(".food-container > div");
$(document.body).on("click", "a.menu-item", function () {
var id = this.id, itemId = ".food-container > #item-" + id;
$allItems.not($(itemId).fadeToggle()).hide();
});
});
我正在使用高级自定义字段转发器字段,因此我需要将该字段隐藏在中继器循环之外。我拥有的菜单 ID 是"4"。所以我只需要将"汉堡免责声明"的免责声明div连接到#4点击事件。
这是菜单: https://jsfiddle.net/42gqu9r9/
这应该会让你走上正确的道路。我正在抓取点击事件(evt 变量(的 ID,以查看选择了什么。
.HTML:
<a id="1" href="javascript:void(0)" class="menu-item">Appetizers<i class="fa fa-caret-right"></i></a>
<a id="2" href="javascript:void(0)" class="menu-item">Tex-Mex<i class="fa fa-caret-right"></i></a>
<a id="3" href="javascript:void(0)" class="menu-item">Salads<i class="fa fa-caret-right"></i></a>
<a id="4" href="javascript:void(0)" class="menu-item">Burgers<i class="fa fa-caret-right"></i></a>
<div class="food-container">
<div id="item-1" style="display: none;">
<div class="food">
<h3>Mac N Cheese Bites</h3> Breaded, then fried macaroni, stuffed with cheese</div>
<div class="price"> $8 </div>
</div>
<div id="item-2" style="display: none;">
<div class="food">
<h3>Salads</h3> Salads
</div>
<div class="price"> $8 </div>
</div>
<div id="item-3" style="display: none;">
<div class="food">
<h3>Tex-Mex</h3> Tex-Mex
</div>
<div class="price"> $8 </div>
</div>
<div id="item-4" style="display: none;">
<div class="food">
<h3>Burgers</h3> Burger
</div>
<div class="price"> $8 </div>
</div>
</div>
<div class="burger-disclaimer">
*All sandwiches and burgers are served with fries or potato chips. Side salad and onion rings available as side, add $2 upcharge
</div>
.JS:
$(function() {
var $allItems = $(".food-container > div");
$(document.body).on("click", "a.menu-item", function(evt) {
var id = this.id,
itemId = ".food-container > #item-" + id;
$allItems.not($(itemId).fadeToggle()).hide();
if (evt.target.id == 4) {
$('.burger-disclaimer').toggle();
} else {
$('.burger-disclaimer').hide();
}
});
});
还有你更新的JS小提琴:https://jsfiddle.net/6y0ymao8/