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 に答える
0

要素を非表示にする純粋な JavaScript の方法は次のとおりです。

document.getElementById('otherdiv1').style.display = 'none';
于 2013-09-24T08:03:41.810 に答える
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 に答える
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 に答える