jQuery 點擊后，滑動切換 next() div

Question

我試圖創建一個手風琴系統，其中手風琴具有 header 和下面的內容塊。 header 的 onClick，內容應該向上或向下滑動（切換）。

但是，我已經為一些初始提示實現了高亮邊框，但這在兩個 div 元素之間（高亮邊框是 SVG 元素。）

我試過使用$(this).parent().next()等，但沒有運氣。 是否有可能獲得 div 類型的下一個兄弟姐妹，還是需要使用唯一的 id 來完成？

 $(".accordion").on("click", function() { $(this).toggleClass("open"); $(this).next(".accordion-content").slideToggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="accordion open"><span>Styles</span> <div class="info-btn"><i class="fas fa-info"></i></div> <span class="accordion-plus-minus"><i class="fal fa-plus"></i><i class="fal fa-minus"></i></span></div> <svg id="style-tip-highlight" xmlns="http://www.w3.org/2000/svg"></svg> <div class="accordion-content" id="style-accordion"></div>

Answer 1

添加另一個.next()

$(this).next().next(".accordion-content").slideToggle();

 $(".accordion").on("click", function() { $(this).toggleClass("open"); $(this).next().next(".accordion-content").slideToggle(); });

 <div class="accordion open"><span>Styles</span> <div class="info-btn"><i class="fas fa-info"></i></div> <span class="accordion-plus-minus"><i class="fal fa-plus"></i><i class="fal fa-minus"></i></span></div> <svg id="style-tip-highlight" xmlns="http://www.w3.org/2000/svg"></svg> <div class="accordion-content" id="style-accordion"> Content </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>