可切换手风琴 - 单击当前的手风琴时，将其他活动手风琴滑动

Question

我目前正在制作自己的插件（自我练习）Accipion.js

每个手风琴都有相同的班级，我通过jQuery初始化了它们：我的手风琴在单击多次时切换/slidetoggle本身，我只希望每当我单击另一个手风琴时，它都会在您单击的上一个手风琴上滑动，然后在您单击多次单击它时单击另一个手风琴

slidetoggle

还是我的代码

(function($) {
$.fn.accordion = function() {
var accordion = this;
accordion.find('.title').click(function() {
$(this).parent('.accordion').find('.content').slideToggle(200);
$(this).toggleClass('active');
});
return this;
};
  $('.accordion').accordion();
})(jQuery);

.accordion {
width:100%;
border:1px solid #ddd;
border-radius:6px;
margin:5px 0px;
}
.accordion > .title {
padding:10px;
font-weight:bold;
}
.accordion > .title + .content {
padding:0px 10px 10px 10px;
display:none;
}
.accordion > .title > .icon {
position:relative;
right:-84%;
-webkit-transform:rotate(90deg);
color:#666;
transition:all 200ms linear;
}
.accordion > .title.active > .icon {
-webkit-transform:none;
color:#666;
transition: all 200ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content"> 
<h1> Accordion 1</h1> 
</div>
</div>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content"> 
<h1> Accordion 2</h1> 
</div>
</div>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content"> 
<h1> Accordion 3</h1> 
</div>
</div>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content">
<h1> Accordion 4</h1>
</div>
</div>

Answer 1

这是您需要的。这里的方法是，我也将活动类也添加到了内容div中，然后在切换窗格时将其删除。并滑动所有没有活动类的窗格，除了用户单击的窗格，即具有活动类的窗格。希望它有帮助。

$.fn.accordion = function() {
var accordion = this;
accordion.find('.title').click(function() {
$(document).find('.title').removeClass('active');
$(document).find('.content').removeClass('active');
$(this).parent('.accordion').find('.content').slideToggle(200).toggleClass('active');
$(this).toggleClass('active');
$('.content:not(".active")').slideUp(200);
});
return this;
};
$('.accordion').accordion();

.accordion {
width:100%;
border:1px solid #ddd;
border-radius:6px;
margin:5px 0px;
}
.accordion > .title {
padding:10px;
font-weight:bold;
}
.accordion > .title + .content {
padding:0px 10px 10px 10px;
display:none;
}
.accordion > .title > .icon {
position:relative;
right:-84%;
-webkit-transform:rotate(90deg);
color:#666;
transition:all 200ms linear;
}
.accordion > .title.active > .icon {
-webkit-transform:none;
color:#666;
transition: all 200ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content"> 
<h1> Accordion 1</h1> 
</div>
</div>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content"> 
<h1> Accordion 2</h1> 
</div>
</div>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content"> 
<h1> Accordion 3</h1> 
</div>
</div>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content">
<h1> Accordion 4</h1>
</div>
</div>

小提琴演示

Answer 2

您也可以使用each功能小提琴：

JS：

$.fn.accordion = function() {
var accordion = this;
accordion.find('.title').click(function() {
$(document).find('div.accordion').each(function(){
$(this).find('.content').slideUp(200);
});
$(this).parent('.accordion').find('.content').slideToggle(200);
$(this).toggleClass('active');
});
return this;
};
$('.accordion').accordion();

Answer 3

尝试这个简单的解决方案

//inside your function body after var accordion = this;
var trigger = accordion.find('.title');
trigger.on("click",function() {
    if ($(this).hasClass('active')) {
        $(this).removeClass('active').next('.content').slideUp(200);
    } else {
        accordion.find('.content').slideUp(200);
        trigger.removeClass('active');
        $(this).addClass('active').next('.content').slideDown(200);
    }
});