jquery show hide each div onlick

问题描述：

我有通过asp.net生成的div的动态数量。我需要通过点击其标题来显示每个div内容。我已经尝试过了{jquery show hide each div onlick

$(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链接到目前为止我尝试过的。任何人都可以解决？

答

问题在于您如何找到要显示/隐藏的内容。你需要找到相关的点击标题中的内容，您的代码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"); 

     }; 
    }); 
});

演示：Fiddle

注：仍然是上下箭头，也没有工作，因为你需要使用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"); 
    }); 
});

演示：Fiddle

你确定使用'的.next（）'是最好的做法是什么？它不是真的与DOM耦合？ – Itay

@Itay任何解决方案都将与dom ...耦合，因为我们正在找到相对于其他的元素...所以'.next（）'或'.closest（'。toggle-container'）。find（' .toggle-content'）'全部都是一样的，并且会有dom依赖性 –

你写的第二个选项比第一个选项好得多。 – Itay

答

下面会工作。

在您的原始代码中，您在加载时为变量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"); 

     }; 
    }); 
});

Fiddle Demo

谢谢@harry。我接受Arun P Johny的答案，因为它有很好的圆滑解决方案。 – Ravimallya

jquery show hide each div onlick

相关推荐