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

Question

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

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

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

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

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

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

Answer 1

Можно ли использовать 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> 

Answer 2

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

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

Answer 3

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

<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> 

Answer 4

С такой 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); 
} 

Answer 5

This является простым примером,

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 animate для более визуального эффекта