在 slideToggle 回调中传递动态创建的 ID

Question

我正在使用 jQuery 创建一个树型导航结构。我有一个 html 无序列表，其中有类别和子列表。当用户单击某个类别时，该类别下的列表项 slideToggle 打开和关闭。在用户创建自己的类别之前，它会很好用。然后我需要为该新类别和子类别激活 slideToggle 方法。

html 结构如下所示：

     <ul>
        <li> <span id="userCat_1">Cat 1</span>
            <ul id="subCat_1>
                <li> Button A </li>
                <li> Button B </li>
                <li> Button C </li>
            </ul>
        </li>
        <li> <span id="userCat_2">Cat 2</span>
            <ul id="subCat_2>
                <li> Button Z </li>
            </ul>
        </li>
    </ul>

这是我最近一次尝试将 slideToggle 功能添加到列表中的所有 "categories"。在这里，我尝试使用对象的 ID（userCat_x 和 subCat_x）来控制 slideToggle。

categoryArray= ["1", "2", "3"]

function activateToggle(){
    for (var i=0; i<categoryArray.length; i++){
        $("#userCat_" + categoryArray[i]).click(function(i){
             $("#subCat_" + categoryArray[i]).slideToggle();
        });
    }
}

我确定我错过了一些概念。花时间寻找答案，似乎让我朝着正确的方向前进。切换适用于新对象，但它会导致切换其他类别，而不是点击类别子类别。

Answer 1

你可能会通过使用 event delegation 和共享 class:

来避免整个头痛

$(document).on('click', '.my-menu-class', function() {
    $(this).children('ul').slideToggle();
});


<ul>
    <li class="my-menu-class"> <span id="userCat_1">Cat 1</span>
        <ul id="subCat_1">
            <li> Button A </li>
            <li> Button B </li>
            <li> Button C </li>
        </ul>
    </li>
    <li class="my-menu-class"> <span id="userCat_2">Cat 2</span>
        <ul id="subCat_2">
            <li> Button Z </li>
        </ul>
    </li>
</ul>

在 slideToggle 回调中传递动态创建的 ID

Passing dynamically created IDs in slideToggle callback

javascript

jquery

dynamically-generated