我被我的下拉内容卡住了。试图旋转单击按钮标题旁边的箭头。第一个内容是默认打开的，这样arrow应该默认在那里转动。
>
当前代码默认情况下不转动内容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();
}
let currentContent = target.next('.dropdown-content');
currentContent.slideToggle(600);
$('.dropdown-content').not(currentContent).slideUp(600);
target.find('.fa-sort-down').toggleClass('r180');
})
}}
dropdownModule.init();
