动态更改分区大小

在我的代码中，我有4个div对齐内联。动态更改分区大小

我想要的是，单击任何div时，它将调整大小以填充所有4个div（宽度：1000px）的空间，并隐藏其他div。

而在重新点击div时，它会调整到原始尺寸。

这就是我到现在为止所做的。

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

截至目前，在点击这个调整大小的其他div的下面的股利。我知道有一种方法可以隐藏其他div，但我不知道该怎么做。

来源

2013-09-24 Newtt

哎哟......我会尝试使用像jQuery框架来帮助你的大脑少伤做这样的事情...... –

的DIV的CSS是' .gallery-image-replenish { \t background：url（'../ images/thumbs/Replenish.jpg'）; \t height：600px; \t width：246px; \t float：left; \t margin-left：3px; \t/* display：inline-block; */ \t text-align：center;' 和div标记如上所述 – Newtt

是否有可能使用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>

来源

2013-09-24 08:15:14

的纯JavaScript的方式来隐藏元素：

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

来源

2013-09-24 08:03:41 Springie

以下是它采用了常见的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>

来源

2013-09-24 08:08:57 abhinsit

这适用于调整div的大小。第二次点击时，它调整回原来的大小？那是我遇到我主要障碍的地方。这是对原创的调整。 – Newtt

有了这种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); 
}

来源

2013-09-24 08:19:23 Oshibka404

我喜欢这个解决方案，以纯粹的基于Javascript的方式来做事......顺便说一下，在for循环中有错误吗？ –

不，没有。 '我 - '返回递减的数字，从数组长度开始。当'i'达到零时，这个布尔值变成false。 – Oshibka404

哇，有趣！我学到了东西！感谢您的反馈@ Oshibka404 :) –

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更多的视觉效果

来源

2013-09-24 08:26:02

动态更改分区大小

回答

相关问题