jquery擴展和摺疊同類型的div，但只有一個

-2

這已被問很多。我正在嘗試使用+/-按鈕展開和摺疊div。我有5次潛水class=="expanderContent"。當下面的功能由於點擊而運行時，我的5個項目中的每個項目都會展開或摺疊。jquery擴展和摺疊同類型的div，但只有一個

標題 - 內內 Heading2 - inner2 inner2 Heading3 + .....

當我點擊+旁邊Heading2我只想heading2打開或關閉不是所有的人。標題和內容在同一個div內。所以我猜我想找出#expanderHead被點擊，只打開姐姐.expanderContent不是所有的.expanderContent

$(document).ready(function(){ 
     $("#expanderHead").click(function(){ 
     $(".expanderContent").slideToggle('2000', "linear", function() { 
      // Animation complete. 
     }); 
     if ($("#expanderSign").text() == "+"){ 
      $("#expanderSign").html("−") 
     } 
     else { 
      $("#expanderSign").text("+") 
     } 
     }); 
    });

HTML（這些是相同的數據，但不會在生產）

 <div class="general_container_div"> 

    <div class="w-row page_wide_row header"> 
    <div class="w-col w-col-01 no_space_column"> 
    <div class="no_space_div"><h5>&nbsp;</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>STATUS</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>PICKUP</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>DROPOFF</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>COURIER</h5></div> 
    </div> 
    <div class="w-col w-col-01 no_space_column"> 
    <div><h5>&nbsp;</h5></div> 
    </div> 
</div> 



    <div class="w-row page_wide_row"> 
    <div class="w-col w-col-01 no_space_column"> 
     <div>?</div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>PICKING&nbsp;UP</p></div> 
    <div><p>NOW</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><a href="#" class="w-button">Button Text</a></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>WhiteGLove</p></div> 
    <div><p>34494 Washington Ave</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>Austin,&nbsp;TX</p></div> 
     <div><p>231-444-5555</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>ORDER&nbsp;# 12345</p></div> 
     <div><p>1 small/medium package</p></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>John&nbsp;Anderson</p></div> 
    <div><p>3456 Elm Street</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>New York, New York</p></div> 
     <div><p>312-444-2323</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>MEMO: Leave at front door.</p></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>Will Roth</p></div> 
    <div><p>123-564-9876</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>NOTES: This is a really long note about how and where to leave something so I can text really long sentences and notes.&nbsp;</p><br></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-01 no_space_column"> 
    <div><h4 id="expanderHead" style="cursor:pointer;"><span id="expanderSign">+</span></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    </div> 
</div> 

     <div class="w-row page_wide_row header"> 
    <div class="w-col w-col-01 no_space_column"> 
    <div class="no_space_div"><h5>&nbsp;</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>STATUS</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>PICKUP</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>DROPOFF</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>COURIER</h5></div> 
    </div> 
    <div class="w-col w-col-01 no_space_column"> 
    <div><h5>&nbsp;</h5></div> 
    </div> 
</div> 



    <div class="w-row page_wide_row"> 
    <div class="w-col w-col-01 no_space_column"> 
     <div>?</div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>PICKING&nbsp;UP</p></div> 
    <div><p>NOW</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><a href="#" class="w-button">Button Text</a></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>WhiteGLove</p></div> 
    <div><p>34494 Washington Ave</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>Austin,&nbsp;TX</p></div> 
     <div><p>231-444-5555</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>ORDER&nbsp;# 12345</p></div> 
     <div><p>1 small/medium package</p></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>John&nbsp;Anderson</p></div> 
    <div><p>3456 Elm Street</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>New York, New York</p></div> 
     <div><p>312-444-2323</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>MEMO: Leave at front door.</p></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>Will Roth</p></div> 
    <div><p>123-564-9876</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>NOTES: This is a really long note about how and where to leave something so I can text really long sentences and notes.&nbsp;</p><br></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-01 no_space_column"> 
    <div><h4 id="expanderHead" style="cursor:pointer;"><span id="expanderSign">+</span></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    </div> 
</div> 

     <div class="w-row page_wide_row header"> 
    <div class="w-col w-col-01 no_space_column"> 
    <div class="no_space_div"><h5>&nbsp;</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>STATUS</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>PICKUP</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>DROPOFF</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>COURIER</h5></div> 
    </div> 
    <div class="w-col w-col-01 no_space_column"> 
    <div><h5>&nbsp;</h5></div> 
    </div> 
</div> 



    <div class="w-row page_wide_row"> 
    <div class="w-col w-col-01 no_space_column"> 
     <div>?</div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>PICKING&nbsp;UP</p></div> 
    <div><p>NOW</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><a href="#" class="w-button">Button Text</a></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>WhiteGLove</p></div> 
    <div><p>34494 Washington Ave</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>Austin,&nbsp;TX</p></div> 
     <div><p>231-444-5555</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>ORDER&nbsp;# 12345</p></div> 
     <div><p>1 small/medium package</p></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>John&nbsp;Anderson</p></div> 
    <div><p>3456 Elm Street</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>New York, New York</p></div> 
     <div><p>312-444-2323</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>MEMO: Leave at front door.</p></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>Will Roth</p></div> 
    <div><p>123-564-9876</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>NOTES: This is a really long note about how and where to leave something so I can text really long sentences and notes.&nbsp;</p><br></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-01 no_space_column"> 
    <div><h4 id="expanderHead" style="cursor:pointer;"><span id="expanderSign">+</span></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    </div> 
</div> 



    <div class="w-row page_wide_row header"> 
    <div class="w-col w-col-01 no_space_column"> 
    <div class="no_space_div"><h5>&nbsp;</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>STATUS</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>PICKUP</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>DROPOFF</h5></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><h5>COURIER</h5></div> 
    </div> 
    <div class="w-col w-col-01 no_space_column"> 
    <div><h5>&nbsp;</h5></div> 
    </div> 
</div> 



    <div class="w-row page_wide_row"> 
    <div class="w-col w-col-01 no_space_column"> 
     <div>?</div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>PICKING&nbsp;UP</p></div> 
    <div><p>NOW</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><a href="#" class="w-button">Button Text</a></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>WhiteGLove</p></div> 
    <div><p>34494 Washington Ave</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>Austin,&nbsp;TX</p></div> 
     <div><p>231-444-5555</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>ORDER&nbsp;# 12345</p></div> 
     <div><p>1 small/medium package</p></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>John&nbsp;Anderson</p></div> 
    <div><p>3456 Elm Street</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>New York, New York</p></div> 
     <div><p>312-444-2323</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>MEMO: Leave at front door.</p></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-2 no_space_column"> 
    <div><p>Will Roth</p></div> 
    <div><p>123-564-9876</p></div> 
    <div class="expanderContent" style="display:none"> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>&nbsp;</p></div> 
     <div><p>NOTES: This is a really long note about how and where to leave something so I can text really long sentences and notes.&nbsp;</p><br></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </div> 
    <div class="w-col w-col-01 no_space_column"> 
    <div><h4 id="expanderHead" style="cursor:pointer;"><span id="expanderSign">+</span></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div><p>&nbsp;</p></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    </div> 
</div> 




</div>

==== UPDATE ========

可能沒有太大的幫助，因爲它不會在JSFiddle中運行，但會在我的網絡服務器上運行。

https://jsfiddle.net/L98q71kg/

來源

2015-11-23 jdog

你可以做一個代碼段或使用的jsfiddle你已經擁有？ – www139

要麼添加**完整**代碼，要麼在[jsfiddle]（https://jsfiddle.net）上創建實時演示 – Tushar

看起來像您有多個具有相同ID的元素..有多少元素具有ID'＃expanderHead'或'#expanderSign' –

-1

做到這一點的方法是使用關鍵字「本」。它看起來像這樣：

$(document).ready(function(){ 
    $("#expanderHead").click(function(){ 
    $(this).slideToggle('2000', "linear", function() { 
     // Animation complete. 
    }); 
    if ($(this).text() == "+"){ 
     $(this).html("−"); 
    } 
    else { 
     $(this).text("+"); 
    } 
    }); 
});

jQuery是一種足以回調您設置的點擊處理程序到被點擊這就是爲什麼這種方法適用的元素的範圍進行綁定。

來源

2015-11-23 04:19:45 Robert

'這'不起作用。在隱藏的div中，它包含所有的子div，我有5個div。 expanderContent使expanderHead與.expandContents的比例爲1比5。因此，一次點擊expanderHead我需要找到.expanderHeads>父級>兄弟姐妹>具有.expanderContent的孩子，並告訴他們slideToggle）。 – jdog

好的，我認爲我誤解了你的帖子。我以爲你想對被點擊的元素做點事情。我想我不理解問題是什麼。聽起來你知道你想編輯哪個節點。 – Robert

該代碼有多個問題。如果要使用相同的名稱，則需要重新使用ID才能切換到類。

以當前方式遍歷層次結構是不正確的。代碼中的兄弟姐妹不是你想要的兄弟姐妹。

1）將所有編號的上課

2）使用下面的JS

$(document).ready(function(){ 
    $(".expanderHead").click(function(){ 
    //$(".expanderContent").slideToggle('1200', "linear", function() { 
    $(this).closest('div').parent('.w-col.w-col-01.no_space_column').parent('.w-row.page_wide_row').children(".w-col-2").children('.expanderContent').slideToggle('1200', "linear", function() { 
     // Animation complete. 
    }); 
    if ($(this).children(":first").text() == "+"){ 
     $(this).children(":first").html("−") 
    } 
    else { 
     $(this).children(":first").text("+") 
    } 
    }); 
});

來源

2015-11-25 02:51:19 jdog

jquery擴展和摺疊同類型的div，但只有一個

回答

相關問題