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鏈接到目前爲止我嘗試過的。任何人都可以解決？

來源

2013-09-22 Ravimallya

問題在於您如何找到要顯示/隱藏的內容。你需要找到相關的點擊標題中的內容，您的代碼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

來源

2013-09-22 10:32:06

你確定使用'的.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

來源

2013-09-22 10:34:05 Harry

謝謝@harry。我接受Arun P Johny的答案，因爲它有很好的圓滑解決方案。 – Ravimallya

jquery show hide each div onlick

回答

相關問題