Могу ли я переключать плавающие модули, не затрагивая все модули ниже?

Четыре модуля со скрытым содержимым, активируемым функцией щелчка. Просто нажмите на изображение или абзац, и вы увидите скрытый контент.

http://codepen.io/anon/pen/Gvcxd

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

Я хотел бы изменить этот сценарий, чтобы модули в другом столбце не перемещались. Другими словами, когда вы нажимаете «ОДИН», тогда перемещается единственный модуль «ТРИ», поскольку он находится внизу. «ДВА» и «ЧЕТЫРЕ» должны оставаться неподвижными.

Вот как это выглядит упрощенно:

1 2         ( <---This is a faux-row, since it's not coded to be a row)
3 4

Когда я нажимаю на переключатель для 2, это выглядит так (H для скрытого содержимого):

1 2
  H
3 4

3 был нажат, и этого не должно произойти. Вместо этого я хочу, чтобы это было просто так:

1 2
3 H
  4

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


javascript jquery css slidetoggle
person micah    schedule 25.09.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете сделать это с помощью z-index, так как вы просто хотите, чтобы статья скользила вниз поверх элементов под ней.

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

HTML

<div id="wrapper">
    <div id="one" class="main-block">ONE
        <div class="article">blah blah blah</div>
    </div>
    <div id="two" class="main-block">TWO
        <div class="article">blah blah blah</div>
    </div>
    <div id="three" class="main-block">THREE
        <div class="article">blah blah blah</div>
    </div>
    <div id="four" class="main-block">FOUR
        <div class="article">blah blah blah</div>
    </div>
    <div id="five" class="main-block">FIVE
        <div class="article">blah blah blah</div>
    </div>
    <div id="six" class="main-block">SIX
        <div class="article">blah blah blah</div>
    </div>
</div>

CSS

.main-block {
    position: relative;
    float: left;
    z-index: 1;
    height: 50px;
    width: 75px;
}
.article {
    position: absolute;
    width: 50px;
    z-index: 2;
}
#wrapper {
    position: relative;  
    width: 150px;    
}

JQuery

$('.article').hide();

$('.main-block').click(function() {
    $(this).children('.article').slideToggle('slow');
});

Вы также можете поиграть с ним на этом jsfiddle.

person Peter Oram    schedule 26.09.2012
comment
Ого, интересно. Я должен попробовать и посмотреть, понравится ли это клиентам. Единственная проблема заключается в том, что элементы div, находящиеся под отброшенным содержимым, просвечивают, например, тени, границы и края. Так как это отзывчивый сайт, я не могу просто сказать, что определенные элементы div временно исчезают. Но это вызов, который я должен решить. Спасибо за интересное решение! - person micah; 26.09.2012

arrow_upward
0
arrow_downward

Если я вас правильно понял, вы можете переключать visiblity: hidden вместо использования display: none, чтобы элемент по-прежнему находился в DOM и т. д., но был полностью прозрачным:

https://developer.mozilla.org/en-US/docs/CSS/visibility

person Chris Adams    schedule 25.09.2012
comment
Интересное предложение, но сохранение скрытого контента в DOM не устраняет корень проблемы, заключающийся в том, что он сбрасывает модули ниже активного. - person micah; 26.09.2012
comment
Да, это позволит вам сделать ваши элементы постоянными, но потенциально у вас может быть значительное количество дополнительного пространства в зависимости от относительных размеров всегда видимых и скрытых компонентов, которые могут не поддаваться чему-то вроде подхода z-index. - person Chris Adams; 26.09.2012
comment
Если вы действительно настроены на столбцовое поведение, возможно, вы захотите использовать модуль столбцов CSS3 и исследовать ситуацию полифилла IE‹10 для - person Chris Adams; 26.09.2012
comment
Если я использую visibility:hidden, мне все равно нужно будет явно скрыть скрытый контент, чтобы он отключался. Кроме того, количество контента будет варьироваться от модуля к модулю. Попытка иметь столбцы не является проблемой, и она будет меняться в зависимости от области просмотра, потому что это адаптивный дизайн. Это поведение модулей после того, как один из них активируется функцией щелчка. Удалось ли вам увидеть, о чем я говорю в ссылке codepen? Я обновил приведенное выше описание, потому что 1 работает иначе, чем остальные. - person micah; 26.09.2012