在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功能添加到列表中的所有“类别”。 在这里，我试图使用对象的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

通过使用事件委托和共享类，您可能会避免整个头痛：

$(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>