將jquery函數應用於多個div？

Question

下面的代碼將顯示/隱藏點擊div。它適用於上市的第一個分區，但不適用於其他任何分區。有沒有辦法讓函數適用於所有具有相同類名的元素？當然，它應該只打開/關閉它所應用的div（例如，點擊Second Div切換按鈕應該只打開/關閉Second Div，而不打其他）。

// this is the markup 
<div class="collapsible-item"> 
    <div class="collapsible-item-title"> 
     <div class="item-title-header"> First Div</div> 
     <img src="/images/expand.png" alt="Expand this section" class="toggle-button"> 
     </div> 
    </div> 
    <div style="display: none;" class="togglethis"> 
     Cras cursus sodales odio, quis consectetur felis ultricies in. 
    </div> 
</div> 

<div class="separator"></div> 

<div class="collapsible-item"> 
    <div class="collapsible-item-title"> 
     <div class="item-title-header"> Second Div</div> 
     <img src="/images/expand.png" alt="Expand this section" class="toggle-button"> 
     </div> 
    </div> 
    <div style="display: none;" class="togglethis"> 
     Cras cursus sodales odio, quis consectetur felis ultricies in. 
    </div> 
</div> 

<div class="separator"></div> 

<div class="collapsible-item"> 
    <div class="collapsible-item-title"> 
     <div class="item-title-header"> Third Div</div> 
     <img src="/images/expand.png" alt="Expand this section" class="toggle-button"> 
     </div> 
    </div> 
    <div style="display: none;" class="togglethis"> 
     Cras cursus sodales odio, quis consectetur felis ultricies in. 
    </div> 
</div> 

而且，這是jQuery：

$(document).ready(function() { 
     $('.toggle-button').toggle(
      function() { 
       $(this).attr('src', '/images/collapse.png'); 
       $(this).parent().siblings('.togglethis').slideToggle('slow'); 
      }, 
      function() { 
       $(this).attr('src', '/images/expand.png'); 
       $(this).parent().siblings('.togglethis').slideToggle('slow'); 
      } 
     ); 

     $('.item-title-header').toggle(
       function() { 
         $('.toggle-button').attr('src', '/images/collapse.png'); 
         $(this).parent().siblings('.togglethis').slideToggle('slow'); 
       }, 
       function() { 
         $('.toggle-button').attr('src', '/images/expand.png'); 
         $(this).parent().siblings('.togglethis').slideToggle('slow'); 
       } 
     ); 
    }); 

Answer 1

像這樣的事情？

<script> 
$(document).ready(function() { 

    $.fn.toggleTo = function(options) { 
     options = $.extend(options, { 
     containerClass:'collapsible-item', 
     speed:'slow', 
     collapse:'/images/collapse.png', 
     expand:'/images/expand.png', 
     toggleClass:'togglethis' 
     }); 

     return this.each(function() { 

     var p = $(this).closest('.' + options.containerClass); 

     $(this).toggle(function() { 
      $(p).find('.toggle-button').attr('src', options.collapse); 
      $(p).next('.' + options.toggleClass).slideToggle('slow'); 
     }, function() { 
      $(p).find('.toggle-button').attr('src', options.expand); 
      $(p).next('.' + options.toggleClass).slideToggle('slow'); 
     }); 
     }); 
    } 

    $('.item-title-header, .toggle-button').toggleTo(); 
    }); 

</script> 

http://jsbin.com/ayula

而且我認爲你的一些穿越的被關閉，它並沒有下降得足夠高，或者自然的東西去的兄弟姐妹，我只是重新編碼它完全。

Answer 2

您打開和關閉DIV標記不匹配。這可能是項目標題標題的開頭DIV標記的行中的結束DIV標記，或者低於該行的兩行。

您也可以使其更加緊湊通過使用這樣的：

$(document).ready(function() { 
    $('.collapsible-item-title').toggle(
     function() { 
      $(this).attr('src', '/images/collapse.png') 
       .next('.togglethis').slideToggle('slow'); 
     }, 
     function() { 
      $(this).attr('src', '/images/expand.png') 
       .next('.togglethis').slideToggle('slow'); 
     } 
    ); 
}); 

Answer 3

你們這些聲音太難了。很肯定這是所有你需要：

$(document).ready(function() { 
    $('.toggle-button').click(function(){ 
     $(this).parent().next().slideToggle('slow'); 
    }); 
}); 

Answer 4

的主要問題是，你不匹配你的collapsible-item-titlediv的內線</div>秒。只要刪除它，它會修復切換。您可能還需要將尾部斜槓添加到img標籤中。

而且我猜測，而不是，

$('.toggle-button').attr('src', '/images/collapse.png'); 

你的意思是有

$(this).siblings('.toggle-button').attr('src', '/images/collapse.png'); 

這是張貼在JS斌更正後的代碼：
http://jsbin.com/iruvo（通過http://jsbin.com/iruvo/edit編輯）

最後，通過將事件處理程序重構爲單個代碼，可以使jQuery代碼更加簡單功能：

function toggleIt() { 
    var collapsibleItem = $(this).parents('.collapsible-item'); 
    var toggleButton = collapsibleItem.find('.toggle-button') 
    var currentImage = toggleButton.attr('src'); 

    toggleButton.attr('src', currentImage === minusIcon ? plusIcon : minusIcon); 

    collapsibleItem.find('.togglethis').slideToggle('slow'); 
} 

$('.toggle-button, .item-title-header').toggle(toggleIt, toggleIt);