[英]Toggle class on click
我正在建立一个常见问题解答,每个问题的后面都有一个“ +”图标,单击该图标后,答案会出现,并且该图标变为“-”图标。 问题是,当您单击下一个问题时,上一个问题的图标不会切换回原始/上一个/其他图标。
参见示例:
https://codepen.io/pixelarchitect/pen/eXLEJV
HTML
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
使用Javascript
$('.faq span').hide();
$('.faq div.question').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('span');
$(".faq span").not($this).hide();
$this.toggle();
$(this).find('svg').toggleClass('fa-plus fa-minus')
});
在此示例中,我使用的是jQuery和免费版本的FontAwesome。
使用与显示/隐藏非常类似的逻辑,您可以将所有svg
恢复为加号,但单击的除外。请参见下文。
$('.faq span').hide(); $('.faq div.question').click(function(e){ e.preventDefault(); var $this = $(this).parent().find('span'); $(".faq span").not($this).hide(); $this.toggle(); // This line turns all fa-minus into fa-plus except the clicked one $('.faq svg').not($(this).find('svg')).removeClass('fa-minus').addClass('fa-plus'); $(this).find('svg').toggleClass('fa-plus fa-minus'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div>
您可以找到所有字体超赞的svg,并使用.addClass("fa-plus").removeClass("fa-minus")
-不包括当前div的父级:
$('.faq span').hide(); $('.faq div.question').click(function(e) { e.preventDefault(); var div = $(this).parent(); var $this = div.find('span'); $(".faq span").not($this).hide(); $(".faq").not(div).find("svg") .addClass("fa-plus") .removeClass("fa-minus"); $this.toggle(); $(this).find('svg').toggleClass('fa-plus fa-minus') });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div>
更新的Codepen: https ://codepen.io/anon/pen/EMevMz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.