Question

我的页面上有15个方形图像div。一个div总是扩展为双倍宽度（蓝色区域），如此屏幕截图所示。 enter image description here 现在我想做的是取决于你点击什么div，扩展div，减少其他人的宽度。我的代码特别适用于1 div（div编号2扩展，div 1减少）

我不想为所有15个div编写代码，其他14个div减少等等。我想知道是否有一种方法可以重写这个函数，它适用于所有div。

提前致谢

$( "#expand2" ).click(function() {
            if(TriggerClick==0){
                TriggerClick=1;
                $( ".vak2" ).animate({width: '50%',}, 1010 );
                $( ".vakinnerlinks2" ).animate({marginLeft: '55%',}, 1010 );
                $( ".vakinfo1" ).animate({width: '0px',}, 990 );
                $( ".vakinfo1" ).css({"padding":'0px'});
            }else{
                TriggerClick=0;
                $( ".vak2" ).animate({width: '25%',}, 990 );
                $( ".vakinfo1" ).animate({width: '25%',}, 1000 );
                $( ".vakinfo1" ).css({"padding":'25px'});
                $( ".vakinnerlinks2" ).animate({marginLeft: '150%',}, 1010 );
            };
        });
});

Answer 1

将您的HTML更改为：

<div class="square vak vakinfo">
   <a id="expand"><p>doetwel</p></a>
   <div class="vakinnerlinks"> hi </div>
</div>
<div class="square vak vakinfo">
   <a id="expand"><p>doetwel</p></a>
   <div class="vakinnerlinks"> hi </div>
</div>
 .... so on or 15 divs I m assuming you have 5x3 divs and onClick of one div the previous one will be decrease in width to 0px.
//also change 'vakinfo1'...15 classes to 'vakinfo'

现在你的JS代码将是：

var vakDivs=$(".vak");
var vakInnerDivs=$(".vakinnerlinks");
var vakInfoDivs=$(".vakinfo");
var expandDivs=$("#expand");
var lastExpanded=-1;

vakDivs.each(function(i){
    expandDivs[i].click(function(){
         if(lastExpanded>-1){
             var lastDecreased=lastExpanded-1;
             if(lastExpanded%5==0) lastDecreased=lastExpanded+1;

             vakDivs[lastExpanded].animate({width: '25%',}, 990 );
             vakInnerDivs[lastExpanded].animate({marginLeft: '150%',},1010);

             vakInfoDivs[lastDecreased].animate({width: '25%',}, 1000 );
             vakInfoDivs[lastDecreased].css({"padding":'25px'});
         }

         if(lastExpanded==i) lastExpanded=-1;
         else{
             var divNoToDecrease=i-1;
             if(i%5==0) divNoToDecrease=i+1;

             vakDivs[i].animate({width: '50%',}, 1010 );
             vakInnerDivs[i].animate({marginLeft: '55%',}, 1010 );

             vakInfoDivs[divNoToDecrease].animate({width: '0px',}, 990 );
             vakInfoDivs[divNoToDecrease].css({"padding":'0px'});

             lastExpanded=i;
         }
    }):
});

您可以使用javascript代码播放/更改以满足您的要求，调试。

编辑：因为我可以在paste2.org上看到您的HTML代码，我猜您只有一个vakinfo div，而且每次只想减少那个。你可以根据它改变javascript。如果有任何疑问/问题，请评论......：）

使用javascript函数通过ID操作多个div

1 个答案: