jQuery單獨切換多個區域

Question

我正在使用jQuery來顯示和隱藏我的網站上的區域，只需切換。哪些工作正常，但如果我有多個元素，我想單獨顯示和隱藏在頁面上，我必須爲每個項目寫一點jQuery。有沒有辦法在封裝類中爲類或ID做這件事？

繼承人我的jQuery：

jQuery('.collapse').click(function() { 


     jQuery('#filterArea').toggle('slow', function() { 

     }); 

    }); 

而且我的繼承人內容：

<div class="tabs"> 
    <div class="ui-widget-header"> 
     <div class="collapse" id="boxId">Content Box</div> 

    </div><br /> 
     <div class="addPadLeftNoFloat" id="filterArea"> 

      <p>Content for box</p> 

     </div>    
</div> 

我希望能夠在頁面上少數地區與類崩的，只是關閉filterArea內部崩潰？還是類似？我沒有很好的解釋這件事！ - 所以，如果我有兩個div與類崩的，當我點擊他們div的filterarea崩潰

湯姆

Answer 1

而不必filterArea作爲id的，將其更改爲一類。

<div class="tabs"> 
    <div class="ui-widget-header"> 
     <div class="collapse" id="boxId">Content Box</div> 
    </div> 

    <br /> 
    <div class="addPadLeftNoFloat filterArea"> 
     <p>Content for box</p> 
    </div>    
</div> 

也能改變你的JavaScript這樣的：

jQuery('.collapse').click(function() { 
    jQuery('.filterArea').toggle('slow', function() { 

    }); 
}); 

A working example。

編輯：如果你只想崩潰.filterArea元素與封閉.tab元素，使用JavaScript這樣的事情：

$('.collapse').click(function() { 
    $(this).closest('.tabs').find('.filterArea').toggle('slow'); 
}); 

Updated example。