Изменить размер Div динамически

Question

Изменить размер Div динамически

0

В моем коде у меня есть 4 divs, выровненных внутри.

То, что я хочу, при нажатии любого div, оно изменяет размер, чтобы заполнить пространство всех 4 div (ширина: 1000 пикселей) и скрыть другие div.

И при возврате div, он изменит размер до исходных размеров.

Это то, что я сделал до сих пор.

<div class="gallery-image-replenish" id="bloc2" onclick="document.getElementById('bloc2').style.width = '980px'"> </div>

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

Newtt 24 сен. 2013, в 10:10

Источник

Теги:

javascript

html

5 ответов

2

С помощью такого HTML:

<div class="gallery-image-replenish" id="bloc1"></div>
<div class="gallery-image-replenish" id="bloc2"></div>
<div class="gallery-image-replenish" id="bloc3"></div>
<div class="gallery-image-replenish" id="bloc4"></div>

вы можете использовать этот тип JS:

var handler = function(e){
    e.target.style.width = "1000px";
    for (j = divs.length; j--; ) {
        if (divs[j].id != e.target.id) {
            divs[j].style.display = "none";
        }
    }
}

var divs = document.getElementsByClassName('gallery-image-replenish'); //array of divs
var div;

for (i = divs.length; i--; ) {
    div = divs[i];
    div.addEventListener('click', handler);
}

Oshibka404 24 сен. 2013, в 06:20

0

Мне нравится это решение для чисто основанного на Javascript способа работы ... кстати, есть ли в вашем цикле for ошибка?
Chris Kempen 24 сен. 2013, в 08:22
1

Нет, нет. i-- возвращает убывающее число, которое начинается с длины массива. Когда i достигну нуля, логическое значение этого становится ложным.
Oshibka404 24 сен. 2013, в 08:25
1

Вау, интересно! Я кое-что узнал! Спасибо за отзыв @ Oshibka404 :)
Chris Kempen 24 сен. 2013, в 08:38

Показать ещё 1 комментарий

0

Это простой пример,

var activ = false;
$('.aligned').live('click',function(){
    if(!$(this).hasClass('actif')) {

        $('.aligned').css('width','0');
        $('.aligned').removeClass('actif');

        $(this).css('width','1000px');
        $(this).addClass('actif');

    } else {
        $('.aligned').css('width','250px');
    }

});

вы можете использовать анимацию jQuery для более визуального эффекта

chakroun yesser 24 сен. 2013, в 06:52

0

Следующее - это решение, которое использует общую функцию javascript для выполнения того, что вы хотите:

<div class="gallery-image-replenish" id="bloc1" onclick="manageDivs(this.id)"> </div>
<div class="gallery-image-replenish" id="bloc2" onclick="manageDivs(this.id)"> </div>
<div class="gallery-image-replenish" id="bloc3" onclick="manageDivs(this.id)"> </div>

<div class="gallery-image-replenish" id="bloc4" onclick="manageDivs(this.id)"> </div>


<script type="text/javascript">

    function manageDivs(divId)
    {
    document.getElementById(divId).style.width = '980px'";
    //to hide rest of the divs
    for(i=1;i<=4;i++)
    {
        if(divId!='bloc'+i)
           document.getElementById('bloc'+i).style.display = 'none';

    }
    }
</script>

abhinsit 24 сен. 2013, в 06:41

0

Это работает в изменении размера div. Как насчет второго клика, его изменение размера до оригинального? Вот где я сталкиваюсь с моим главным препятствием. Это изменение размера к оригиналу.
Newtt 24 сен. 2013, в 08:19

0

Чистый javascript способ скрыть элемент:

document.getElementById('otherdiv1').style.display = 'none';

Springie 24 сен. 2013, в 05:31

Ещё вопросы

Мне нравится это решение для чисто основанного на Javascript способа работы ... кстати, есть ли в вашем цикле for ошибка?
Нет, нет. i-- возвращает убывающее число, которое начинается с длины массива. Когда i достигну нуля, логическое значение этого становится ложным.
Вау, интересно! Я кое-что узнал! Спасибо за отзыв @ Oshibka404 :)
Это работает в изменении размера div. Как насчет второго клика, его изменение размера до оригинального? Вот где я сталкиваюсь с моим главным препятствием. Это изменение размера к оригиналу.

Angelo Michel · Accepted Answer · 2013-09-24T05-42-00.000Z

Можно ли использовать jQuery (jquery.com) в вашем проекте?

Потому что это сэкономит много кода (и сделает его более читаемым!). Это будет выглядеть так (не проверено, но, вероятно, работает: P):

<div id="bloc1" class="gallery-image-replenish">1</div>
<div id="bloc2" class="gallery-image-replenish">2</div>
<div id="bloc3" class="gallery-image-replenish">3</div>
<div id="bloc4" class="gallery-image-replenish">4</div>

<script>
  jQuery(document).ready(function(){
      var galleryElements = $('.gallery-image-replenish');
      galleryElements.click(function(){
        var clickedElement = $(this);
        if (clickedElement.hasClass('expanded')) { // if it has the class expanded, remove it (and show other elements again)
          clickedElement.removeClass('expanded');
          galleryElements.show();
        } else { // if it has not got the expanded css class hide other and add class to expanded
          galleryElements.not(clickedElement).hide(); // hide every other div
          $(this).addClass('expanded'); // add stylesheet class for the new bigger width
        }
      });
  });
</script>