如何解决带有旋转箭头的下拉内容 (css/js)
我被我的下拉内容困住了。尝试旋转单击的按钮标题旁边的箭头。默认打开第一个内容,所以箭头应该默认在那里。
-
当前代码默认不转 Content 1 箭头和
-
单击会旋转所有箭头,因为我不知道如何正确引用 JS 中的当前图标。
非常欢迎任何建议。
let dropdownModule = {
init: function(){
this.cacheDom();
this.bindEvents();
},cacheDom: function(){
this.$el = $('.dropdown-container');
this.$dropdownBox = this.$el.find('.dropdown-box');
this.$dropdownContent = this.$el.find('.dropdown-content');
},bindEvents:function(){
this.$dropdownBox.on('click',function(){
let currentContent = $(this).next('.dropdown-content');
currentContent.slideToggle(600);
$('.dropdown-content').not(currentContent).slideUp(600);
$('.fa-sort-down').toggleClass('r180');
})
}}
dropdownModule.init();
<div class="dropdown-container">
<div class="dropdown-box">Button Title 1<i class="fas fa-sort-down"></i>
</div>
<div style="display: block;" class="dropdown-content">
Content 1
</div>
</div>
<div class="dropdown-container">
<div class="dropdown-box">Button Title 2<i class="fas fa-sort-down"></i>
</div>
<div class="dropdown-content">
Content 2
</div>
</div>
.fa-sort-down {
transition: all 0.5s ease;
}
.r180 {
transform: rotate(180deg);
}
解决方法
基本上,当您点击下拉菜单时,可能是标签被点击,您需要先找到目标。
将您的 js 更改为:
let dropdownModule = {
init: function(){
this.cacheDom();
this.bindEvents();
},cacheDom: function(){
this.$el = $('.dropdown-container');
this.$dropdownBox = this.$el.find('.dropdown-box');
this.$dropdownContent = this.$el.find('.dropdown-content');
},bindEvents:function(){
this.$dropdownBox.on('click',function(e){
let target = $(e.target);
if(!$(e.target).hasClass("dropdown-box")){
target = $(e.target).parent();
}
$('.fa-sort-down').removeClass('r180');
let currentContent = target.next('.dropdown-content');
currentContent.slideToggle(600);
$('.dropdown-content').not(currentContent).slideUp(600);
target.find('.fa-sort-down').toggleClass('r180');
})
}}
dropdownModule.init();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。