Javascript 内容量的转换会计-当前扩展太多Jquery

我已经包含了上面的jsfiddle来说明我的意思

基本上在浅蓝色的盒子里，我有一个不正常的拷贝量来说明悬停时底部向下扩展。我的问题是，是否有另一种解决方案不需要在下面进行额外的移动？有些东西可能会更侧对侧，或者没有额外的运动。我在想，因为跳水高度的差异不是这样的，但我想我会问

这就是我现在拥有的

HTML

---

保持这样的布局，但更改其扩展方式，使其仅应用于框的右侧，并在那里显示内容

要做到这一点，您需要将框分为两个面：选项面（左）和内容面（右）。然后，应将内容侧的高度设置为所有选项侧的相同高度，并设置

overflow-y:auto。另外，将内容侧背景颜色更改为与悬停的选项相同。我认为这是一个好办法

<div class="stripe row" id="secondNav">
      <div class="secondNav-sidebars secondNav-columns-3">
              <div class="secondNav-sidebars-bg"></div>
              <div class="container hoverWidge hovered">
                  <div class="row">
                    <div class="secondNav-widgets secondNav-widgets-1 col-sm-12 col-md-6">
                            <div class="addPad">
                            <h3>Product Solutions</h3>
                              <p class="show">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<button class="btn btn-white">Learn More</button></p>
                             </div>
                    </div>
                    <div class="secondNav-widgets secondNav-widgets-2 col-sm-12 col-md-3">
                            <div class="addPad addPadNoLeft">
                            <h3>Nutrition</h3>
                             <p class="noShow">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..<button class="btn btn-white">Learn More</button></p>
                            </div>
                    </div>
                    <div class="secondNav-widgets secondNav-widgets-3 col-sm-12 col-md-3">
                            <div class="addPad addPadNoLeft">
                            <h3>Capabilities</h3>
                             <p class="noShow">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..<button class="btn btn-white">Learn More</button></p>
                             </div>
                    </div>
                  </div>
              </div>
      </div>

    </div>

$(document).ready(function() {
      $('.secondNav-widgets').hover(function() {
        if ($(this).hasClass('col-md-6')) {                                  

        }else {
        $(this).find(".noShow").switchClass( "noShow", "show", 500, "easeInSine" ).fadeTo( "slow", 1 );
        $('.secondNav-widgets').find(".show").fadeOut("slow", function () {
            $(this).removeClass("show", 0).addClass("noShow", 0).css({display:"none"});
        });
        $('.secondNav-widgets').switchClass( "col-md-6", "col-md-3", 1000 );    
        $(this).switchClass( "col-md-3", "col-md-6", 1000 );

        }


      });

    });