刪除空白時的slideToggle

Question

我正在一個網站上，我有以下代碼：

//SlideToggle 
 
$('a').attr('href', 'javascript:void(0)'); 
 
$('a').click(function() { 
 
    $(this).next().slideToggle(); 
 
}); 
 

 
$('.container div').addClass('cf');

.hidden { 
 
    display: none; 
 
} 
 
.container { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.container div { 
 
    width: 25%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    text-align: center; 
 
    background: lightblue; 
 
    margin: 0 0 0.25em; 
 
    padding: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ipsam, dolorem illum. Amet officiis dignissimos eligendi excepturi nam, aliquid architecto atque nostrum illo. Ratione nesciunt, id nulla dolores? Blanditiis, praesentium.</p> 
 
    </div> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sint nihil labore molestias expedita corrupti ipsa iusto iure sit nisi ab nobis maxime unde voluptates magni, distinctio quae. Deserunt, incidunt.</p> 
 
    </div> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt accusamus facilis tempore repellat eligendi accusantium laudantium quis, magni a soluta deleniti voluptatibus quam, est aliquid. Atque a, esse. Itaque, consequuntur.</p> 
 
    </div> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, quo, possimus. Quam odit laudantium, ex alias, repellat laborum quae nobis expedita aperiam iusto iure at facilis obcaecati doloribus quis earum.</p> 
 
    </div> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ratione doloribus laborum deleniti quae cumque quasi, repellat, ex nemo nulla corporis voluptatum vel doloremque nesciunt cupiditate, veritatis excepturi vero harum.</p> 
 
    </div> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cupiditate quisquam, dicta eligendi ut eos culpa nisi quod nesciunt vero soluta voluptates illo esse voluptatibus, ab, sint impedit repudiandae dolorum!</p> 
 
    </div> 
 
</div>

的的slideToggle運作良好。但是，當我滑動切換時，我希望此操作僅影響底部的div而不影響其他部分。讓我告訴你我想要什麼：

（我不想在DIV高度接觸，他們必須保持這樣的）

希望我是清楚的。謝謝你的幫助 ！

Answer 1

此接近，也許有人能改善這個..

//SlideToggle 
 
\t $('a').attr('href','javascript:void(0)'); 
 
\t $('a').click(function() { 
 
     var $self = $(this); 
 
     var index = $self.parent().index();  
 
\t \t $(this).next().slideToggle(100, function() {   
 
      var margin = $self.parent().toggleClass("active").find("p").outerHeight(); 
 
      if($self.parent().hasClass("active")) { 
 
       $(".container div").eq(index + 3).css("margin-top", margin); 
 
      } 
 
      else { 
 
       $(".container div").eq(index + 3).css("margin-top", 0);    
 
      }      
 
     });   
 
\t }); 
 
\t $('.container div').addClass('cf');

* { 
 
    box-sizing:border-box; 
 
    } 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.container div { 
 
    width: 33.3333333333%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    text-align: center; 
 
    background: lightblue; 
 
    margin:0; 
 
    padding: 25px; 
 
    position:relative; 
 
    -webkit-transition: ease-in-out, margin .1s ease-in-out; 
 
    transition: ease-in-out, margin .1s ease-in-out; 
 
    float:left; 
 
} 
 

 
.container div p { 
 
    position:absolute; 
 
    width:100%; 
 
left:0; 
 
    padding:25px; 
 
    margin:0; 
 
    top:100%; 
 
    background: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ipsam, dolorem illum. Amet officiis dignissimos eligendi excepturi nam, aliquid architecto atque nostrum illo. Ratione nesciunt, id nulla dolores? Blanditiis, praesentium.</p> 
 
    </div> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sint nihil labore molestias expedita corrupti ipsa iusto iure sit nisi ab nobis maxime unde voluptates magni, distinctio quae. Deserunt, incidunt.</p> 
 
    </div> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt accusamus facilis tempore repellat eligendi accusantium laudantium quis, magni a soluta deleniti voluptatibus quam, est aliquid. Atque a, esse. Itaque, consequuntur.</p> 
 
    </div> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, quo, possimus. Quam odit laudantium, ex alias, repellat laborum quae nobis expedita aperiam iusto iure at facilis obcaecati doloribus quis earum.</p> 
 
    </div> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ratione doloribus laborum deleniti quae cumque quasi, repellat, ex nemo nulla corporis voluptatum vel doloremque nesciunt cupiditate, veritatis excepturi vero harum.</p> 
 
    </div> 
 
    <div><a href="#">See more</a> 
 
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cupiditate quisquam, dicta eligendi ut eos culpa nisi quod nesciunt vero soluta voluptates illo esse voluptatibus, ab, sint impedit repudiandae dolorum!</p> 
 
    </div> 
 
</div>

Answer 2

試試這個：

之前隱藏所有p標籤滑動切換。

$('a').click(function() { 
     $('p').hide(); 
     $(this).next().slideToggle(); 
});