在多個 div 之間切換並將文本移動到單個塊中

Question

我正在處理這個小提琴，但我不知道如何顯示（切換）我制作的黑色塊內的內容 + 同時切換 CLICKED div 的“+”和“-”符號..

結構示例：

 $('.column_column > div > div').hide(); $('.column_column h4').click(function(e){ e.preventDefault(); // hide all span var $this = $(this).parent().find('div'); $(".column_column > div > div").not($this).hide(); // here is what I want to do $this.toggle(); });

 .sp_appear { background: black; color: #FFF; display: block; float: left; width: 100%; min-height: 150px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="column_column"> <div class="column_attr"> <h4 href="">element1 <span class="sp_toggle_icon">+</span> </h4> <div>content 1</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element2 <span class="sp_toggle_icon">+</span> </h4> <div>content 2</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element3 <span class="sp_toggle_icon">+</span> </h4> <div>content 3</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element4 <span class="sp_toggle_icon">+</span> </h4> <div>content 4</div> </div> </div> <div class="sp_appear"></div>

有人可以幫忙嗎？ 附上代碼 - https://jsfiddle.net/kp9d0vfb/

Answer 1

這是你想要的嗎？

 $('.column_column > div > div').hide(); $('.column_column h4').click(function(e){ e.preventDefault(); // hide all span var $this = $(this).parent().find('div'); $(".column_column > div > div").not($this).hide(); // here is what I want to do $this.toggle(); $(this).find("span").text(($(this).find("span").text() == "-")? "+": "-"); });

 .sp_appear { background: black; color: #FFF; display: block; float: left; width: 100%; min-height: 150px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="column_column"> <div class="column_attr"> <h4 href="">element1 <span class="sp_toggle_icon">+</span> </h4> <div>content 1</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element2 <span class="sp_toggle_icon">+</span> </h4> <div>content 2</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element3 <span class="sp_toggle_icon">+</span> </h4> <div>content 3</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element4 <span class="sp_toggle_icon">+</span> </h4> <div>content 4</div> </div> </div> <div class="sp_appear"></div>