jQuery увеличить окно, чтобы показать содержимое переполнения

Я загружаю некоторые строки текста в каждом из полей div (список категорий). Мне нужно, чтобы он показывал только три загрузки. Поэтому я ограничил высоту и установил переполнение: hidden; css, чтобы это произошло. У меня есть маленькая кнопка (изображение, загруженное в div) рядом с полем для увеличения и уменьшения высоты окна. Проблема в том, что этот элемент работает неправильно. Вот коды (я оставляю другие не связанные HTML/коды CSS/Jquery):jQuery увеличить окно, чтобы показать содержимое переполнения

HTML (один из ящиков на странице):

<div class="content" style="height:50px;overflow:hidden;"> 
    <div>Category 1</div> 
    <div>Category 2</div> 
    <div>Category 3</div> 
    <div>Category 4</div> 
    <div>Category 5</div> 
    <div>Category 6</div> 
</div> 
<div class="see-more"></div>

JQuery:

jQuery(document).ready(function() { 
    jQuery(".see-more").click(function() { 
     jQuery(this).prev("div.content").height(200); 
    }); 
});

В коде jQuery возникают проблемы. Мне также нужно знать, как я могу найти реальную высоту скрытого содержимого (из-за переполнения), чтобы установить точную высоту в поле вместо статического значения 200.

источник

2012-12-24 PRO MAX

Вы можете обернуть внутренние элементы и использовать высоту этого контейнера, чтобы определить максимальную высоту элементов. Вы могли бы сделать некоторую Calcs для увеличения высоты с шагом ... следующими наборами полной высоты

$(function(){ 
    $('.content').wrapInner('<div class="inner">'); 

    $(".see-more").click(function() { 
     var $cont=$(this).prev() 
     var maxHeight = $cont.find('.inner').height(); 
     $cont.height(maxHeight); 
    }); 
});

DEMO: http://jsfiddle.net/nq2Em/1/

источник

2012-12-24 08:33:51 charlietfl

Идеи, как представляется, работа и демо было хорошо. Но я не мог использовать его в своем коде, и мне нужно немного больше времени, чтобы исправить это. Большое спасибо. –

не уверен, что вы используете noConflict() и вам нужно преобразовать '$' в 'jQuery' ... Я просто всегда пишу' $ '... намного быстрее – charlietfl

oops! Я сказал вам, что на этой странице есть много таких ящиков: D вы можете показать мне, как выбрать только соответствующий? Я имею в виду, что тег контента появился раньше. –

Вы можете использовать свойство scrollHeight, чтобы получить реальную высоту, если контейнер, или если вы не хотите делать какую-либо анимацию, вы также можете просто удалить переполнение. This fiddle показывает решение по высоте:

jQuery(document).ready(function() { 
    jQuery(".see-more").click(function() { 
     var box = jQuery(this).prev("div.content"), 
      height = box[0].scrollHeight; 
     box.height(height); 
    }); 
});

источник

2012-12-24 08:27:20

jQuery увеличить окно, чтобы показать содержимое переполнения

ответ

Смежные вопросы