0

在我的代码中，我有 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，但我不知道该怎么做。

4

5 回答 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);
}
于 2013-09-24T08:19:23.633 回答
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>
于 2013-09-24T08:15:14.243 回答
0

隐藏元素的纯javascript方法是：

document.getElementById('otherdiv1').style.display = 'none';
于 2013-09-24T08:03:41.810 回答
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>
于 2013-09-24T08:08:57.083 回答
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 animate来获得更多的视觉效果

于 2013-09-24T08:26:02.887 回答