Jquery 在单击另一个父子级时更改父级div元素高度

我需要一些帮助，但我想不出来

下面是两个父div.fourPackCont，每个div中有4个div和4个image.eventItem

现在div.venueDropdown已隐藏。单击图像时，图像将可见，并且场馆信息将向下滑动。当你点击同一张图片时，场馆信息会向上滑动，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));
    })

---

此脚本仅在单击图像本身或“关闭”按钮时有效，但在单击其他父分区中的另一个图像时无效。

这是一个开始。请定义responsiveLevel以修复错误，并查看是否可以让演示正常工作@伊舍伍德，我做了一些工作。只是图像没有显示出来。但是如果你点击中间的一个场地，点击第一个场地，你会看到很大的差距。只有再次单击该场馆名称，差距才会缩小。