可切换的手风琴 - 效果基本show等活性手风琴单击当前一个

Question

当我正在做我自己的插件（自我实践）Accordion.js

每一个手风琴具有相同的类和我通过jQuery初始化他们都： 我手风琴切换/的slideToggle本身，当点击多次，我只是想，只要我点击另一个手风琴，它会效果基本show你点击前面的手风琴和的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>

Fiddle Demo

Answer 2

试试这个简单的解决方案

//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); 
    } 
}); 

Answer 3

您还可以使用each功能fiddle：

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();