单击另一个父子项时更改父div元素高度

Question

我需要一些帮助，但我无法解决这个问题。

下面是2个父div（.fourPackCont），每个div中有4个div，包含4个图像（.eventItem）。

现在div.venueDropdown被隐藏了。单击图像时，它变为可见，并且场地信息slideDown。当您点击同一图像时，场地信息slideUp和fourPackCont会回到正常高度。

我的问题是，如果我点击第一个父div的第一个图像，然后点击说出第二个父div的第二个图像，第一个图像的div会向上滑动，但是父div仍显示一个大的巨大的差距与恢复到原来的大小。

<div class="fourPackCont">
   <div data-index="0" data-taxonomy="los-angeles-ca" class="eventItem">
      <div style="background-image:url();" class="eventImg"></div>
         <div class="venueName">The Nice Guy</div>
         <div class="venueCity">Los Angeles, CA</div>
         <div class="contArrow"></div>
         <div class="venueDropdown"></div>
      </div>
   </div>
   <div data-index="0" data-taxonomy="los-angeles-ca" class="eventItem">
      <div style="background-image:url();" class="eventImg"></div>
         <div class="venueName">The Nice Guy</div>
         <div class="venueCity">Los Angeles, CA</div>
         <div class="contArrow"></div>
         <div class="venueDropdown"></div>
      </div>
   </div>
   <div data-index="0" data-taxonomy="los-angeles-ca" class="eventItem">
      <div style="background-image:url();" class="eventImg"></div>
         <div class="venueName">The Nice Guy</div>
         <div class="venueCity">Los Angeles, CA</div>
         <div class="contArrow"></div>
         <div class="venueDropdown"></div>
      </div>
   </div>
   <div data-index="0" data-taxonomy="los-angeles-ca" class="eventItem">
      <div style="background-image:url();" class="eventImg"></div>
         <div class="venueName">The Nice Guy</div>
         <div class="venueCity">Los Angeles, CA</div>
         <div class="contArrow"></div>
         <div class="venueDropdown"></div>
      </div>
   </div>
</div>
<div class="fourPackCont">
   <div data-index="0" data-taxonomy="los-angeles-ca" class="eventItem">
      <div style="background-image:url();" class="eventImg"></div>
         <div class="venueName">The Nice Guy</div>
         <div class="venueCity">Los Angeles, CA</div>
         <div class="contArrow"></div>
         <div class="venueDropdown"></div>
      </div>
   </div>
   <div data-index="0" data-taxonomy="los-angeles-ca" class="eventItem">
      <div style="background-image:url();" class="eventImg"></div>
         <div class="venueName">The Nice Guy</div>
         <div class="venueCity">Los Angeles, CA</div>
         <div class="contArrow"></div>
         <div class="venueDropdown"></div>
      </div>
   </div>
   <div data-index="0" data-taxonomy="los-angeles-ca" class="eventItem">
      <div style="background-image:url();" class="eventImg"></div>
         <div class="venueName">The Nice Guy</div>
         <div class="venueCity">Los Angeles, CA</div>
         <div class="contArrow"></div>
         <div class="venueDropdown"></div>
      </div>
   </div>
   <div data-index="0" data-taxonomy="los-angeles-ca" class="eventItem">
      <div style="background-image:url();" class="eventImg"></div>
         <div class="venueName">The Nice Guy</div>
         <div class="venueCity">Los Angeles, CA</div>
         <div class="contArrow"></div>
         <div class="venueDropdown"></div>
      </div>
   </div>
</div>

这是js：

    function OpenCloseItem(that){
        var parent = jQuery(that).closest(".eventItem");
        var target = parent.find('.venueDropdown');
        var targetArrow = parent.find('.contArrow');
        var heightElement;
        var specialCase;
        if(responsiveLevel == 0){
            heightElement = parent.closest(".fourPackCont");
            specialCase = false;
        }else if(responsiveLevel == 1){
            if(parseInt(parent.attr("data-index")) > 1){
                heightElement = parent.closest(".fourPackCont");
                specialCase = true;
            }else if(parseInt(parent.attr("data-index")) <= 1){
                heightElement = parent.closest(".fourPackCont").find(".dualPackClear");
                specialCase = false;
            }
        }else if(responsiveLevel == 2){
            heightElement = parent;
            specialCase = false;
        }

        var elementH ;
        var dropdownH ;
        if(target.hasClass('active') && targetArrow.hasClass('active')){
            target.toggleClass('active');
            target.slideUp('fast');   
            targetArrow.toggleClass('active');
            targetArrow.slideUp('fast');   
            elementH = parent.height();
            dropdownH = target.height();
            if(responsiveLevel == 1){
                if(!specialCase){
                    heightElement.animate({height:"0px"},'slow');
                }else{
                    heightElement.animate({height:elementH+elementH+"px"},'slow');
                } 
            }else{
                heightElement.css("height","auto");  
            }

        }else{
            elementH = parent.height();
            dropdownH = target.height();
            if(responsiveLevel == 1){
                if(!specialCase){
                    heightElement.animate({height:dropdownH+20+"px"},'slow');
                }else{
                    heightElement.animate({height:elementH+elementH+dropdownH+20+"px"},'slow');
                }
            }else{
                heightElement.animate({height:elementH+dropdownH+20+"px"},'slow');
            }

            jQuery(".venueDropdown.active").hide();
            jQuery(".venueDropdown.active").toggleClass("active");
            jQuery(".contArrow.active").hide();
            jQuery(".contArrow.active").toggleClass("active")
            target.toggleClass('active');
            target.slideDown('slow');
            targetArrow.toggleClass('active');
            targetArrow.slideDown('slow');
        }
    }

    jQuery(".eventItem .eventImg").on("click", function(){
        OpenCloseItem(jQuery(this));
    })
    jQuery(".closeDrop .close").on("click",function(){
        OpenCloseItem(jQuery(this));
    })

此脚本仅在我单击图像本身或关闭按钮时有效，但在单击其他父div中的其他图像时不起作用。