[英]jQuery On click, slideToggle next() div
I have tried to create an accordion system where the accordions have a header and a content block below.我试图创建一个手风琴系统,其中手风琴具有 header 和下面的内容块。 onClick of the header, the content should slide up or down(toggled).
header 的 onClick,内容应该向上或向下滑动(切换)。
However, I have implemented a highlighting border for some initial tips, but this is in between the two div elements (the highlighting border is an SVG element.)但是,我已经为一些初始提示实现了高亮边框,但这在两个 div 元素之间(高亮边框是 SVG 元素。)
I have tried using $(this).parent().next()
etc. with no luck.我试过使用
$(this).parent().next()
等,但没有运气。 Is it possible to get the next sibling of type div, or will it need to be done with unique ids?是否有可能获得 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>
Add another .next()
添加另一个
.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.