與jQuery滑動面板上的動態視圖

Question

你見過某人的代碼，只是笑了嗎？準備好與我的jQuery來，因爲這樣做可能沒有任何意義給你，但我想:)

無論如何，我需要的是簡單，我在這裏得到了其他問題，一些靈感如Slide Panel up and down但他們並沒有做到我需要的東西。至少可以接受。

我在我的標題（BOOTSTRAP）正下方有一個面板。這個面板需要在那裏，但用戶必須有一個選擇關閉它，不是整個方式。只要仍然有fa-chevron圖標可用於點擊它並將其向下滑動以及一些信息（我將在下面提供圖像）。

簡而言之

因此，要求是：

• 開始開放，FA-字形向上
• 圖標上點擊，面板向上滑動時（有點slowish），隱藏照片和第二排的信息，並將圖標切換到fa-chevron-down。
• 點擊fa-chevron down（摺疊視圖），所有內容都會返回到初始的完整視圖。

下面是HTML

<div id="header" class="header navbar navbar-fixed-top navbar-inverse" data-current-theme="navbar-inverse"> 
</div> 
<div class="row"> 
    <div class="col-xs-12"> 
     <div class="banner clearfix"> 
      <div class="collapser"> 
       <a href="#"><i class="fa fa-chevron-up fa-fw collapse-icon"></i></a> 
      </div> 
      <div class="banner-info clearfix"> 
       <div class="col-sm-12 col-md-2"> 
        <div class="circle-container"> 
         <img class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGjucaoN3fabOcumnr7RKTB3ICTJFLuLClnpiQUIR9oW4a11wb" alt="offender-img"> 
        </div> 
       </div> 
       <div class="col-sm-12 col-md-10"> 
        <div class="col-sm-12 col-md-3"> 
         <div class="form-group"> 
          <label class="control-label">Full Name</label> 
          <span>Floyd "Money" Mayweather</span> 
         </div> 
         <div class="form-group"> 
          <label class="control-label">Some Label</label> 
          <span>Something Here</span> 
         </div> 
        </div> 
        <div class="col-sm-12 col-md-3"> 
         <div class="form-group"> 
          <label class="control-label">Offender ID#</label> 
          <span>123569863</span> 
         </div> 
         <div class="form-group"> 
          <label class="control-label">Longer Label Example</label> 
          <span>Something Here with an ellipsis</span> 
         </div> 
        </div> 
        <div class="col-sm-12 col-md-3"> 
         <div class="form-group"> 
          <label class="control-label">Institution</label> 
          <span>Graterford</span> 
         </div> 
         <div class="form-group"> 
          <label class="control-label">Some Link</label> 
          <a href="#"><span>Something Here</span></a> 
         </div> 
        </div> 
        <div class="col-sm-12 col-md-3"> 
         <div class="form-group"> 
          <label class="control-label">Institution</label> 
          <span>Graterford</span> 
         </div> 
         <div class="form-group"> 
          <label class="control-label">Some Link</label> 
          <span href="#"><p>Something Here</p></span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

的CSS

.navbar { 
    border: none; 
    border-bottom: 2px solid #30373e; 
    font-size: 14px; 
    -webkit-box-shadow: 0 1px rgba(0,0,0,0.025); 
    box-shadow: 0 1px rgba(0,0,0,0.025); 
    z-index: 1040; 
    margin-bottom: 0; 
    height: 55px; 
} 

.banner { 
    border: none; 
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.07); 
    box-shadow: 0 2px 0 rgba(0,0,0,0.07); 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    border-radius: 5px; 
    margin-bottom: 20px; 
    position: relative; 
    background: #101113; 
    padding: 20px; 
    display: block; 
    top: 55px; 
} 

.banner .collapser { 
    position: absolute; 
    bottom: 10px; 
    color: #bbb; 
} 

.banner .circle-container { 
    position: relative; 
    left: 35px; 
    text-align: center; 
    width: 110px; 
    height: 110px; 
    display: flex; 
    overflow: hidden; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    -ms-border-radius: 100%; 
    border-radius: 100%; 
    border: 3px solid #bbb; 
} 

.banner .banner-info label { 
    color: rgba(248,151,29,0.77); 
} 

.banner .banner-info span { 
    display: block; 
    color: #bbb; 
    white-space: nowrap; 
    width: 85%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

和非常模糊，可能是無用的JS

$('.collapser').click(function() { 
    $collapser = $(this); 
    $banner = $collapser.parent().find('.banner'); 

    $banner.slideToggle(500, function() { 
     $collapser.find('.collapse-icon').toggleClass('fa-chevron-up fa-chevron-down'); 
    }); 
}); 

這裏是目視參考

兩種觀點

初始視圖

倒塌視圖

這裏是CODEPEN

Answer 1

沒有.banner元素出現的$collapser.parent()的孩子呢？

嘗試$banner = $collapser.parent().find(".banner-info");

codepen http://codepen.io/anon/pen/WrXYGx

---

改變.banner到.banner-info有沒有辦法來滑動起來比少？或者會是一個整體 不同的交易？因爲我可以隱藏照片和第二行，如果我把它弄亂足夠長的時間，但我仍然需要第一行保持 可見。

使用選擇$banner = $collapser.parent().find('.banner-info .circle-container, .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)')爲$banner收集

$('.collapser').click(function() { 
    $collapser = $(this); 
    $banner = $collapser.parent() 
      .find('.banner-info .circle-container\ 
        , .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)'); 

    $banner.slideToggle(500, function() { 
     $collapser 
     .find('.collapse-icon') 
     .toggleClass('fa-chevron-up fa-chevron-down'); 
    }); 
}); 

codepen http://codepen.io/anon/pen/WrXYGx