jquery show隐藏每个div onclick

时间:2013-09-22 10:29:54

标签: javascript jquery html css

我有一个通过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链接。任何人都可以解决问题吗?

2 个答案:

答案 0 :(得分: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");

         };
     });
 });

演示: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

答案 1 :(得分: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");

         };
     });
 });

Fiddle Demo