Хочу немного модифицировать этот скрипт, чтобы из активного элемента switch tab разворачивался его контент, сейчас это работает не верно (раскрываются сразу все).
Делал решение на css с привязкой раскрытия к активному элементу, но даже с transition раскрытие/скрытие выглядит не плавно, поэтому решил попробовать со слайдами.
$(".content").not(":first").hide();
$(".switch:first div").show();
$(".switch").click(function() {
var sld = $(".switch div");
$(".switch").removeClass("active").eq($(this).index()).addClass("active");
$(".content").hide().eq($(this).index()).fadeIn();
if ($(".switch").eq($(this).index()).hasClass("active")) {
sld.slideDown();
} else {
sld.slideUp();
}
}).eq(0).addClass("active");
.switch span {
display: inline-block;
font-family: Arial;
font-size: 14px;
padding: 5px;
margin-bottom: 10px;
background-color: #eee;
border-radius: 4px;
border: 1px solid #ccc;
}
.switch div {
display: none;
font-family: Arial;
font-size: 16px;
padding: 5px 0;
}
.active span {
color: red;
}
Подскажите что я делаю не так?
Ответ
Можете вот так сделать:
$('.switch div').each(function( index ) {
var sld = $(this);
sld.slideUp();
});
if ($(this).hasClass('active')) {
var sld = $(this).find('div');
sld.slideDown();
}
Полный код Jquery:
(function($) {
$(".content").not(":first").hide();
$(".switch:first div").show();
$(".switch").click(function() {
$(".switch").removeClass("active").eq($(this).index()).addClass("active");
$(".content").hide().eq($(this).index()).fadeIn();
$('.switch div').each(function( index ) {
var sld = $(this);
sld.slideUp();
});
if ($(this).hasClass('active')) {
var sld = $(this).find('div');
sld.slideDown();
}
}).eq(0).addClass("active");
})( jQuery );
Результат:
Комментариев нет:
Отправить комментарий