可切换的手风琴 - 在点击当前的手风琴时滑动其他活动手风琴

Question

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

每个手风琴都有相同的类，我通过jquery初始化它们： 我的手风琴在点击多次时切换/滑动切换本身，我只是想在每次点击另一个手风琴时，它会滑动您点击的前一个手风琴，并在您多次点击它时滑动另一个手风琴

无论如何，继续我的代码

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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