作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作引导 Accordion ,当它显示时更改图标,当它隐藏时,它会将图标更改回以前的状态。我制作了这个函数,它几乎可以工作,但我的问题是,它始终需要元素的第一个 ID,而不是当我单击时需要实际的元素 ID。有没有可能的方法来获取元素的实际 id 而不仅仅是第一个元素。
jQuery(document).on('show.bs.collapse', function() {
var childIdStr = jQuery(this).children().find('i').attr('id');
var myId = "#" + childIdStr;
jQuery(myId).removeClass('dashicons-plus');
jQuery(myId).addClass('dashicons-minus');
});
jQuery(document).on('hide.bs.collapse', function() {
var childHideIdStr = jQuery(this).children().find('i').attr('id');
var myId = "#" + childHideIdStr;
if(jQuery('.collapse').hasClass('show')){
jQuery(myId).removeClass('dashicons-minus');
jQuery(myId).addClass('dashicons-plus');
}
});
<div id="accoridian" class="mt-5" role="tablist">
<div class="footer-card">
<div class="footer-card-header">
<div class="row">
<div class="col footer-card-headline">Center</div>
<div class="col footer-card-icon"><a data-toggle="collapse" href="#collapseOne"><i id="collapse1"
class="dashicons dashicons-plus"></i></a></div>
</div>
</div>
<div id="collapseOne" class="collapse">
<div class="card-body footer-card-body">
<p>Aalykkevej 1<br />
6240 Løgumkloster</p>
<b class="text-uppercase">Telefon</b>
<p>74 92 81 18 (hverdage fra 8.00 - 15.00)</p>
<b class="text-uppercase">E-mail</b>
<p>hviding.asylsyd@toender.dk</p>
</div>
</div>
</div> <!-- ./footer-card -->
<!-- Center Hviding -->
<div class="footer-card mt-2">
<div class="footer-card-header">
<div class="row">
<div class="col footer-card-headline">Center hviding</div>
<div class="col footer-card-icon"><a data-toggle="collapse" href="#collapseTwo"><i id="collapse2"
class="dashicons dashicons-plus"></i></a></div>
</div>
</div>
<div id="collapseTwo" class="collapse">
<div class="card-body footer-card-body">
<p>Ribevej<br />
6720 Ribe</p>
<b class="text-uppercase">Telefon</b>
<p>74 92 93 59 (hverdage fra 8.00 - 15.00)</p>
<b class="text-uppercase">E-mail</b>
<p>hviding.asylsyd@toender.dk</p>
</div>
</div>
</div> <!-- ./footer-card -->
最佳答案
只需将复杂的 jQuery 更改为
jQuery('a[data-toggle="collapse"] i').on('click',function(e){
$(this).toggleClass('dashicons-plus');
$(this).toggleClass('dashicons-minus');
});
关于jquery - 始终采用第一个元素 id。如何重置事件并实际获取元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58320034/
我是一名优秀的程序员,十分优秀!