单击一个菜单项时显示隐藏字段 - 高级自定义字段重复器

Question

我有一个免责声明 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(); }); }); 我正在使用 Advanced Custom Fields Repeater Field，因此我需要将该字段隐藏在 Repeater 循环之外。我的菜单 ID 是“4”。所以我只需要将 "burger-disclaimer" 的免责声明 div 连接到 #4 点击事件。

这是菜单：https://jsfiddle.net/42gqu9r9/

Answer 1

这应该会让您走上正确的道路。我正在抓取点击事件的 ID（evt 变量），以查看选择了什么。

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">  </div>
    </div>
    <div id="item-2" style="display: none;">
        <div class="food">
            <h3>Salads</h3> Salads
        </div>
        <div class="price">  </div>
    </div>
    <div id="item-3" style="display: none;">
        <div class="food">
            <h3>Tex-Mex</h3> Tex-Mex
        </div>
        <div class="price">  </div>
    </div>
    <div id="item-4" style="display: none;">
        <div class="food">
            <h3>Burgers</h3> Burger
        </div>
        <div class="price">  </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  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 Fiddle：https://jsfiddle.net/6y0ymao8/

单击一个菜单项时显示隐藏字段 - 高级自定义字段重复器

Show a Hidden Field When One Menu Item is Clicked - Advanced Custom Fields Repeater

javascript

jquery

repeater

advanced-custom-fields