Отзывчивый дизайн для отображения: нет

Question

Любая помощь с этим была бы оценена, я не могу ее обработать.

У меня есть список информации, содержащейся в отдельном DIV

На странице загрузки только название каждого DIV показывает.

<div class='listing' >  

<a href="#" onclick="toggle_visibility('interactive');"> 
    <h3 class='title'>Title</h3> 
</a> 

    <div id="interactive" style="display:none;"> 
     <div class="web"><p><a href="#">#</a></p></div> 
     <div class="phone"><p><a href="Tel:#">Tel: #</a></p></div> 
     <div class="email"><p><a href="#">#</a></p></div> 
     <p>copy: ipsum blah </p> 
     <p>Blah Blah</p> 
    </div> 

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
} 

OnClick переключает видимость контента. Все идет нормально.

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

Скажем, у меня есть 2 колонки. Если я отключусь, чтобы переключить видимость, он, конечно, по-прежнему отображает содержимое в 4-х столбце. Но я хочу, чтобы невидимый контент теперь возвращался к полной ширине (может быть, много контента, и выглядит странно, чтобы выпустить только половину столбца). Поэтому, по сути, мне нужно, чтобы переключатель onclick отображал div, чтобы всегда быть шириной экрана.

Могу ли я сделать это в css? Я пробовал стилизовать «раскрытый» div, но не радость.

Любые указатели были бы очень желанными ??? !!!! Я уверен, что это легко, но я все пробовал, и я все еще все это изучаю!

Answer 1

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

Во-первых, изменить HTML, чтобы использовать класс, а не жесткий стиль:

<div id="interactive" class="listing-item"> 

Далее измените JS для переключения класса, а не изменить стиль непосредственно:

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    // Note: classList is IE10+, so you might have to do more work 
    // to support older browsers 
    e.classList.toggle('visible'); 
} 

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

.listing-item { 
    display: none; 
} 
.listing-item.visible { 
    display: block; 
} 

@media (...) { 
    .listing-item.visible { 
     ... 
    } 
} 

Если вы хотите получить фантазии, попробовать CSS3 стиль:

.listing-item { 
    overflow: hidden; 
    max-height: 0; 
    transition: all 0.2s ease-in-out; 
} 
.listing-item.visible { 
    // pick something reasonable here, to make sure your 
    // content is visible. Too high, and the animation will be off. 
    max-height: 999px; 
    overflow: visible; 
}