Question

在我的代码中，我有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。我知道有一种隐藏其他div的方法，但我不知道该怎么做。

Answer 1

使用这种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 2

是否可以在项目中使用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 3

隐藏元素的纯JavaScript方式是：

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

Answer 4

以下是使用常用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>

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

动态更改Div大小

5 个答案: