jQuery在父li中单击div时显示嵌套ul

我试图在单击其父li中的一个div时显示一个隐藏的嵌套ul，我对它非常满意。就这样，嵌套ul的初始隐藏工作正常，div背景图像切换正常，但其他一切都不起作用。有什么建议吗

当前代码如下：

HTML:

jQuery：

$(document).ready(function(){
    $('.subField').hide();
    $('.buttonShow').click(function() {
        $(this).toggleClass('buttonHide');
        $(this).parent().next('.subField').show('slow');
    });
    $('.buttonHide').click(function() {
        $(this).parent().next('.subField').hide('slow');
    });
});

非常感谢

试试看

$(document).ready(function () {
    $('.subField').hide();
    //use event delegation since classes are changed dynamically
    $('#branches').on('click', '.buttonShow', function () {
        //remove the show class and assign hidden
        $(this).toggleClass('buttonHide buttonShow');
        //the subfield is a child of the parent not the next sibling
        $(this).siblings('.subField').show('slow');
    });
    $('#branches').on('click', '.buttonHide', function () {
        $(this).toggleClass('buttonHide buttonShow');
        $(this).siblings('.subField').hide('slow');

    });
});

演示：

试试看

$(document).ready(function(){
    $('.subField').hide();

    $('.browseFields').on("click" , ".buttonShow" , function() {
        $(this).removeClass('buttonShow').addClass("buttonHide");
        $(this).parent().find('.subField').show('slow');
    });
    $('.browseFields').on("click" , ".buttonHide" , function() {
        $(this).removeClass('buttonHide').addClass("buttonShow");
        $(this).parent().find('.subField').hide('slow');
    });
});

---

您还可以尝试合并单击处理程序

$(document).ready(function () {
    $('.subField').hide();
    //use event delegation since classes are changed dynamically
    $('#branches').on('click', '.buttonShow, .buttonHide', function () {
        $(this).hasClass('buttonShow') ? $(this).siblings('.subField').show('slow') : $(this).siblings('.subField').hide('slow');

        $(this).toggleClass('buttonHide buttonShow');

    });
});

---

我在这里创作了一把小提琴。请查收

我在jQuery中做了一些更改。我还对你的html做了一些修改。 我已经在div中放置了锚定标记

 $(document).ready(function(){
        $('.subField').hide();
        $(document).on("click",".buttonShow",function(e) {
            $(this).addClass('buttonHide');
            $(this).removeClass('buttonShow');
           $(this).closest('li').find('.subField').eq(0).show('slow');        
        });
         $(document).on("click",".buttonHide",function(e) {
            debugger
             $(this).addClass('buttonShow');
             $(this).removeClass('buttonHide');
             $(this).closest('li').find('.subField').eq(0).hide('slow');
        });
    });

---

您在类

按钮侧切换，但该按钮仍然具有类
按钮显示
对吗？因此，您将得到一个包含这两个类的按钮，我认为您需要在事件处理程序中执行任何操作之前检查这种可能性。谢谢你的帮助。也谢谢你的注释，帮助澄清了很多事情。
$(document).ready(function () {
    $('.subField').hide();
    //use event delegation since classes are changed dynamically
    $('#branches').on('click', '.buttonShow, .buttonHide', function () {
        $(this).hasClass('buttonShow') ? $(this).siblings('.subField').show('slow') : $(this).siblings('.subField').hide('slow');

        $(this).toggleClass('buttonHide buttonShow');

    });
});

 $(document).ready(function(){
        $('.subField').hide();
        $(document).on("click",".buttonShow",function(e) {
            $(this).addClass('buttonHide');
            $(this).removeClass('buttonShow');
           $(this).closest('li').find('.subField').eq(0).show('slow');        
        });
         $(document).on("click",".buttonHide",function(e) {
            debugger
             $(this).addClass('buttonShow');
             $(this).removeClass('buttonHide');
             $(this).closest('li').find('.subField').eq(0).hide('slow');
        });
    });