jQuery: переключать высоту на нескольких разделах с помощью одной функции - PullRequest
Новая
       42

jQuery: переключать высоту на нескольких разделах с помощью одной функции

3 голосов
/ 27 июля 2011

У меня есть несколько секций, а точнее три, разной высоты с базовой компоновкой: 

    <section>
       <h2>My heading</h2>
    </section>

Я ищу способ показать их изначально, но потом, когда пользователь нажимает на <h2>, чтобы этот раздел уменьшился до высоты 68 пикселей. Основная проблема заключается в том, что каждый раздел имеет разную высоту (т. Е. Первый - 478 пикселей, второй - 2118 пикселей и третий - 247 пикселей), но я не хочу писать отдельную функцию для каждого раздела и надеялся сделать все это один. Он работал нормально, пока я не закрыл первый раздел, и вместо того, чтобы открыть его снова, нажмите на второй раздел <h2>. Вот тут и начались проблемы. Итак, мой вопрос, есть ли в любом случае, чтобы сделать это, или мне нужна отдельная функция для каждого раздела? 

sectionSize = "normal";
$(document).ready(function(){
  //var sectionSize = "normal";
  $("h2").click(function(){
     var parentSection = $(this).parents("section");      
    if (sectionSize == "normal") {
      sectionHeight = parentSection.height();
      parentSection.animate({height:"68px"},"fast"),
      sectionSize = "collapsed";
    } else {
      parentSection.animate({height:sectionHeight},"fast"),   
      sectionSize = "normal";
    }
  });
});

У меня есть более полная версия http://jsfiddle.net/Skooljester/94yqX/ с дальнейшим уточнением HTML и CSS.

Ответы [ 3 ]

2 голосов
/ 27 июля 2011

Вместо того, чтобы хранить высоту в глобальной переменной (как правило, использовать глобальные переменные в любом случае плохо). Сохраните его для элемента, используя функцию data () jquery: 

var parentSection = $(this).parents("section");   
var sectionSize = $(this).data('sectionSize') || "normal";   
if (sectionSize == "normal") {
    $(this).data('sectionHeight' parentSection.height());
    parentSection.animate({height:"68px"},"fast"),
    $(this).data('sectionSize', 'collapsed');
 }
 else {
     parentSection.animate({height:$(this).data('sectionHeight')},"fast"),   
     $(this).data('sectionSize', 'normal');
 }

Обновлено с полным кодом для функции клика

0 голосов
/ 27 июля 2011

Вы можете сохранить высоту по умолчанию в разделе, чтобы вы знали при каждом нажатии, где установить высоту этого раздела. Я получил это работает в этом jsFiddle: http://jsfiddle.net/uchV3/

0 голосов
/ 27 июля 2011

Проверьте slideToggle ();

http://api.jquery.com/slideToggle/

Я бы создал контейнер с классом ниже ваших тегов H2, например: 

 <h2>Header</h2>
 <div class="slideThis">
 some content
 </div>

Тогда

напишите jQuery, похожий на этот: 

 $('h2').click(function(){
       $(this).next('.slideThis').slideToggle('slow');
 });

OR ......

Изучите настройку своей страницы с помощью jQuery UI Accordion

http://jqueryui.com/demos/accordion/

...