[英]jQuery On click, slideToggle next() div
我试图创建一个手风琴系统,其中手风琴具有 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>
添加另一个.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.