2

我有通过 asp.net 生成的动态数量的 div。我需要通过单击其标题来显示每个 div 内容。我试过这个{

 $(function () {
            var myHead = $(".toggle-container").find(".toggle-header");
            var myBody = $(myHead).parent().find(".toggle-content");
            $(myHead).click(function () {
                if ($(myBody).css('display') === 'none') {
                    $(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
                    $(this).parent().find(".toggle-content").slideDown("slow");
                } else if ($(myBody).css('display') === 'block') {
                    $(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
                    $(this).parent().find(".toggle-content").slideUp("slow");

                };
            });
        });

但它仅适用于第一个标题，其余标题不会折叠它的子内容。这是我迄今为止尝试过的JsFiddle链接。任何人都可以修复吗？

4

2 回答 2

4

问题是您如何找到要显示/隐藏的内容。您需要找到与单击的标题相关的内容，您的代码var myBody = $(myHead).parent().find(".toggle-content");应该在单击处理程序中作为var myBody = $(this).next()

 $(function () {
     var myHead = $(".toggle-container .toggle-header");
     $(myHead).click(function () {
         var myBody = $(this).next()
         if ($(myBody).css('display') === 'none') {
             $(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
             $(this).parent().find(".toggle-content").slideDown("slow");
         } else if ($(myBody).css('display') === 'block') {
             $(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
             $(this).parent().find(".toggle-content").slideUp("slow");

         };
     });
 });

演示：小提琴

注意：上下箭头仍然不起作用，因为您需要使用find()而不是children()

但可以简化为

jQuery(function ($) {
    var $heads = $(".toggle-container .toggle-header");
    $heads.click(function () {
        var $this = $(this);
        $this.find('i').toggleClass('icon-chevron-sign-down icon-chevron-sign-up');
        $this.next().slideToggle("slow");
    });
});

演示：小提琴

于 2013-09-22T10:32:06.347 回答
1

下面会工作。

在您的原始代码中，您在myBody加载本身时为变量分配了一个值。由于这样的元素很多，所以只使用了第一个。

现在我已将myBody变量的值设置移动到click事件内部并使用$(this). 这将确保它始终找到与单击的当前元素相关的元素。

 $(function () {
     var myHead = $(".toggle-container").find(".toggle-header");
     $(myHead).click(function () {
         var myBody = $(this).parent().find(".toggle-content");         
         //console.log('yes');
         if ($(myBody).css('display') === 'none') {
             $(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
             $(this).parent().find(".toggle-content").slideDown("slow");
         } else if ($(myBody).css('display') === 'block') {
             $(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
             $(this).parent().find(".toggle-content").slideUp("slow");

         };
     });
 });

小提琴演示

于 2013-09-22T10:34:05.353 回答