Не получается поменять высоту div
Изучаю сейчас jQuery, пробую сделать аккордион, базовый функционал работает, но хочу сделать чтобы айтемы тянулись по высоте как мне надо, а не только от высоты контента зависели. Никак не получается высоту объекту поменять, соседним можно, а вот по тому к-рому был клик, ну никак, все уже перепробовал. Посмотрите еще вы пожалуйста, может подскажете чего...
$(document).ready(function() {
//console.log();
$(".i-head").click(function () {
var obj = $(this).next();
obj.slideToggle();
obj.toggleClass('expanded', obj.height() == 1);
var h = $("#accord").height();
var h1 = $("#accord .i-body:first").height();
h = h - h1 - 4*20;
var i = 0;
$("#accord .i-body").each(function() {
if ($(this).hasClass('expanded')) i++;
});
// получаю высоту на к-рую тянуть все айтемы, поровну на всех пространство делится
h = Math.floor(h / i);
/*
до этого момента все правильно, все проверил через логи, все объекты получаются,
и все переменные содержат нужные значения
*/
$(".expanded").css("height", h);
// не работает, вообще никакой реакции
//(вернее меняет высоту всем, кроме текущего, как я убедился ниже)
//$(".i-body:eq(1)").css("height", h); // и даже так не работает,
//НО работает на других пунктах, т.е. если мы сейчас кликнули 1-й, а менять будем 2-му то все получится
//obj.css("height", h); // так тоже не работает
// еще одна попытка, думал может дело в slideToggle, попробовал проанимировать, тоже безрезультатно
//obj.css('display', 'block');
//obj.animate({height: h}, 1500);
});
$(".i-body").click(function () {
$(this).css("height", 200);
// что интересно, тут работает, но мне нужно чтобы работало в функции выше,
// т.е. по клику хедера, а не тела
});
});
<div style="height:400px;"> <!-- Accordion --> <div class="acc-container" id="accord"> <div class="acc-item"> <div class="i-head"> <span class="i-title">Item 1</span><div class="i-arrow"></div> </div> <div class="i-body"> <div style="padding:20px;color:blue;background:#EABF9A;"> CONTENT of Item 1 </div> </div> </div> <div class="acc-item"> <div class="i-head"> <span class="i-title">Item 2</span><div class="i-arrow"></div> </div> <div class="i-body" style="display:none;"> <div style="padding:20px;color:blue;background:#EACF5A;"> CONTENT of Item 2 Line 0<br/> CONTENT of Item 2 Line 1<br/> CONTENT of Item 2 Line 2<br/> </div> </div> </div> <div class="acc-item"> <div class="i-head"> <span class="i-title">Item 3</span><div class="i-arrow"></div> </div> <div class="i-body" style="display:none;"> <div style="padding:20px;color:blue;background:#EABF9A;"> CONTENT of Item 3 Line 0<br/> CONTENT of Item 3 Line 1<br/> CONTENT of Item 3 Line 2<br/> CONTENT of Item 3 Line 3<br/> CONTENT of Item 3 Line 4<br/> CONTENT of Item 3 Line 5<br/> CONTENT of Item 3 Line 6<br/> CONTENT of Item 3 Line 7<br/> </div> </div> </div> <div class="acc-item"> <div class="i-head"> <span class="i-title">Item 4</span><div class="i-arrow"></div> </div> <div class="i-body" style="display:none;"> <div style="padding:20px;color:blue;background:#EACF5A;"> CONTENT of Item 3 Line 0<br/> CONTENT of Item 3 Line 1<br/> CONTENT of Item 3 Line 2<br/> CONTENT of Item 3 Line 3<br/> CONTENT of Item 3 Line 4<br/> CONTENT of Item 3 Line 5<br/> CONTENT of Item 3 Line 6<br/> CONTENT of Item 3 Line 7<br/> </div> </div> </div> </div> </div> <!-- END container --> |
Кпараметру height или width не забывай указывать единицу измерения например:
$(".expanded").css("height", h + "px");
|
Цитата:
Спасибо за ответ. Какие еще будут мнения? |
хм... запустил твой код, все пашет как часы... Не понимаю в чем проблема у тебя. Кликаю например по слову "Item 1" и разворачивается элемент ниже.
|
Все правильно, работает. Но я хочу чтобы высота равномерно делилась между элементами, а не по высоте своего контента они были. Для этого и пытался задать высоту в событии клика. Но я уже решил проблему. (будете смеяться, но я уже забыл в чем она была, полчаса времени прошло))))
Спасибо за попытку помочь :thanks: Вот вариант работающий как мне надо (может пригодится кому, тут я еще добавил смену иконки (arrow-exp/arrow-clp))
$(".i-head").click(function () {
var obj = $(this).next();
obj.toggleClass('expanded');
$(this).children('.i-arrow').toggleClass('arrow-exp');
$(this).children('.i-arrow').toggleClass('arrow-clp');
var h = $("#accord").height();
var h1 = $("#accord .i-body:first").height();
h = h - h1 - 4*22;
var i = 0;
$("#accord .i-body").each(function() {
if ($(this).hasClass('expanded')) i++;
});
h = Math.floor(h / i);
$("#accord .i-body").each(function() {
if ( (!$(this).hasClass('expanded')) && (!$(this).hasClass('i-first')) ) {
$(this).animate({height: 0}, 500);
}
});
$(".expanded").animate({height: h}, 500);
});
В HTML коде тоже есть небольшие изменения <div style="height:400px;"> <!-- Accordion --> <div class="acc-container" id="accord"> <div class="acc-item"> <div class="i-head"> <span class="i-title">Item 1</span><div class="i-arrow arrow-exp"></div> </div> <div class="i-body i-first"> <div style="padding:20px;"> Item 1 content </div> </div> </div> <div class="acc-item"> <div class="i-head"> <span class="i-title">Item 2</span><div class="i-arrow arrow-clp"></div> </div> <div class="i-body" style="height:0px;"> <div style="padding:20px;"> Item 2 content<br/> Item 2 content<br/> Item 2 content<br/> Item 2 content<br/> Item 2 content<br/> Item 2 content<br/> Item 2 content<br/> Item 2 content<br/> </div> </div> </div> <div class="acc-item"> <div class="i-head"> <span class="i-title">Item 3</span><div class="i-arrow arrow-clp"></div> </div> <div class="i-body" style="height:0px;"> <div style="padding:20px;"> Item 3 content<br/> Item 3 content<br/> Item 3 content<br/> Item 3 content<br/> Item 3 content<br/> Item 3 content<br/> Item 3 content<br/> Item 3 content<br/> </div> </div> </div> <div class="acc-item"> <div class="i-head"> <span class="i-title">Item 4</span><div class="i-arrow arrow-clp"></div> </div> <div class="i-body" style="height:0px;"> <div style="padding:20px;"> Item 4 content<br/> Item 4 content<br/> Item 4 content<br/> Item 4 content<br/> Item 4 content<br/> Item 4 content<br/> Item 4 content<br/> Item 4 content<br/> </div> </div> </div> </div> </div> Ну и для полноты картины, CSS
.acc-container {
width: 300px;
height: 100%;
border: 1px solid black;
overflow: hidden;
}
.i-head {
border-top: 1px solid black;
border-bottom: 1px solid black;
position: relative;
background: url(../images/acc.png) repeat-x;
}
.i-title {
font-weight: bold;
padding: 0 8px;
}
.i-arrow {
position: absolute;
top: 4px;
right: 4px;
width: 12px;
height: 12px;
cursor: pointer;
}
.arrow-exp { background: url(../images/minus.png) no-repeat; }
.arrow-clp { background: url(../images/plus.png) no-repeat; }
.i-body {
overflow: auto;
color: blue;
}
PS Если будете использовать этот код, первый элемент не работает как остальные, не пугайтесь, это мне так нужно просто было, он у меня должен быть фиксированный, поэтому я его не учитывал и не тестировал вообще. |
| Часовой пояс GMT +3, время: 23:33. |