[英]How to collapse jQuery accordion menu consisting of div's?
I have seen many similar questions but still haven't found a solution to my problem. 我已经看到许多类似的问题,但仍然没有找到解决我问题的方法。
I have made an accordion menu with duplicated jQuery code for every item in the menu. 我制作了一个手风琴菜单,菜单中的每个项目都有重复的jQuery代码。 I was wondering if there isn't a more effective way with less jQuery code. 我想知道是否有更少的jQuery代码没有更有效的方法。
Preferably no changes to the HTML markup please 最好不要更改HTML标记
$('.what-we-do-toggle1').click(function() {
$('.what-we-do-text1').animate({
height: "toggle",
opacity: "toggle"
}, 200);
$('.what-we-do-text2').slideUp(200);
$('.what-we-do-text3').slideUp(200);
$('.what-we-do-text4').slideUp(200);
$('.what-we-do-text5').slideUp(200);
$('.what-we-do-text6').slideUp(200);
});
$('.what-we-do-toggle2').click(function() {
$('.what-we-do-text2').animate({
height: "toggle",
opacity: "toggle"
}, 200);
$('.what-we-do-text1').slideUp(200);
$('.what-we-do-text3').slideUp(200);
$('.what-we-do-text4').slideUp(200);
$('.what-we-do-text5').slideUp(200);
$('.what-we-do-text6').slideUp(200);
});
$('.what-we-do-toggle3').click(function() {
$('.what-we-do-text3').animate({
height: "toggle",
opacity: "toggle"
}, 200);
$('.what-we-do-text1').slideUp(200);
$('.what-we-do-text2').slideUp(200);
$('.what-we-do-text4').slideUp(200);
$('.what-we-do-text5').slideUp(200);
$('.what-we-do-text6').slideUp(200);
});
$('.what-we-do-toggle4').click(function() {
$('.what-we-do-text4').animate({
height: "toggle",
opacity: "toggle"
}, 200);
$('.what-we-do-text1').slideUp(200);
$('.what-we-do-text2').slideUp(200);
$('.what-we-do-text3').slideUp(200);
$('.what-we-do-text5').slideUp(200);
$('.what-we-do-text6').slideUp(200);
});
$('.what-we-do-toggle5').click(function() {
$('.what-we-do-text5').animate({
height: "toggle",
opacity: "toggle"
}, 200);
$('.what-we-do-text1').slideUp(200);
$('.what-we-do-text2').slideUp(200);
$('.what-we-do-text3').slideUp(200);
$('.what-we-do-text4').slideUp(200);
$('.what-we-do-text6').slideUp(200);
});
$('.what-we-do-toggle6').click(function() {
$('.what-we-do-text6').animate({
height: "toggle",
opacity: "toggle"
}, 200);
$('.what-we-do-text1').slideUp(200);
$('.what-we-do-text2').slideUp(200);
$('.what-we-do-text3').slideUp(200);
$('.what-we-do-text4').slideUp(200);
$('.what-we-do-text5').slideUp(200);
});
http://codepen.io/berry807/pen/KdGeVG http://codepen.io/berry807/pen/KdGeVG
Without changing markup 无需更改标记
$('#what-we-do .row > div').click(function() {
$('#what-we-do .row > div p').stop().slideUp(); // slide all up
$(this).find('p').stop().slideToggle(); // slide this one down
});
http://codepen.io/anon/pen/mezKBB http://codepen.io/anon/pen/mezKBB
Something like this: 像这样:
jQuery(document).ready(function($){
$('#what-we-do .row > div').on('click', function(){
var $this = $(this);
var $content = $this.children('p');
if(!$this.hasClass('toggled'){
$('#what-we-do .row > .toggled > p').slideUp();
$('#what-we-do .row > .toggled').removeClass('toggled');
$this.addClass('toggled');
$content.slideDown();
}else{
$this.removeClass('toggled');
$content.slideUp();
}
});
});
Please note I have not tested it but it should work this way. 请注意,我尚未对其进行测试,但是它应该可以这种方式工作。
Without chaning the html-structure: 无需更改html结构:
$('#what-we-do .container .row div').on('click', function() {
for (var i = 1; i <= 6; i++) {
$(this).find($('.what-we-do-text' + i)).animate({
height: "toggle",
opacity: "toggle"
}, 200);
}
});
http://codepen.io/anon/pen/YyJvEV http://codepen.io/anon/pen/YyJvEV
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.