Здравствуйте. Вот в чем суть скрипта:
Есть три колонки, которые я выравниваю по высоте, и делаю я это вот таким скриптиком:
function equalHeight(group) {
var tallest = 0;
group.each(function() {
thisHeight = h(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
Со своей задачей он справляется на ура. Но, если один пункт меню (гармошки) очень высокий, то он соответственно сильно увеличивает высоты колонок. И при открывании следующего, более короткого пункта меню, высоту колонок не меняет (высота остается очень большой для маленького пункта гармошки). Что бы это пофиксить, я решила брать за основу высоту центральной колонки и присваивать эту высоту остальным 2-м колонкам при клике на любой из пунктов меню. Но с реализацией у меня возникли проблемы. Проблема заключается в том, что при загрузке документа высота установилась, а потом не меняется больше. Помогите, пожалуйста, разобраться.
Ниже представлена моя попытка решить эту проблему. Но что-то с ней не так..
var h = jQuery.noConflict();
function setHeight(group, centHeight)
{
console.log(centHeight + ' passed to the function');
if (h(window).height() < centHeight)
{
group.height(centHeight);
}
else {alert('something is wrong');}
}
h(document).ready(function(){
h('.main-menu ul').addClass('hidden');
setHeight(h(".column"), h('#qwerty').height());
console.log('Init: current height is ' + h('#qwerty').height());
h('.main-menu .menu-item').on('click', function(){
h('.main-menu ul').addClass('hidden');
console.log('Click on non-first element: current height BEFORE CLICK is ' + h('#qwerty').height());
h(this).children('ul').stop().slideDown(500)
.parent().siblings().children('ul').stop().slideUp(200);
h('.main-menu').children(":first").removeClass('active-li-1');
h('.home-page').stop().slideUp(200);
console.log('Click on non-first element: current height is ' + h('#qwerty').height());
});
h('.main-menu').children(":first").on('click', function(){
h(this).addClass('active-li-1')
.siblings().children('ul').stop().slideUp(200);
h('.home-page').stop().slideDown(200);
console.log('Click on element: current height is ' + h('#qwerty').height());
});
});
http://jsfiddle.net/QNtzv/
Только без картинок отображается.
