更改.CSS（）當.SlideToggle（）

Question

我用jQuery做了一個手風琴，現在有問題了，當內容向上滑動時，圖標應該變回。對於其他手風琴，它可以正常工作，但實際上我不知道如何爲活動手風琴實現它（如果再次點擊手風琴，您剛纔打開）。圖標與transform:rotate(90deg)一起旋轉。

$(document).ready(function(){ 
    $(".preview").click(function(){ 
     $(this).next(".accordion-invisible").slideToggle(200); 
     $(".accordion .accordion-invisible").not($(this).next()).slideUp(200); 

     $('span').css({ 
      transform: 'rotate(0deg)', 
      bottom: '0px' 
     }); 

     $(this).find("span").css({ 
      transform: 'rotate(90deg)' 
     }); 

     $(this).parents(".accordion").find("span").css({ 
      transform: 'rotate(90deg)', 
      bottom: '10px' 
     }); 
    }); 
}); 

我把我的整個代碼到CodePen：You can find it here有人偷什麼想法？

Answer 1

我會重寫click綁定的邏輯一點。

你可以加助手class（可以說.active）到當前活躍的手風琴。如果點擊元素的類別爲.active，則會知道關閉它。否則檢查另一個slide是否有.active，關閉那個並打開點擊的。

$(document).ready(function(){ 
    $(".preview").click(function(){ 
     var $this = $(this); 

     if ($this.hasClass("active")) { 
     // the "clicked" element is already opened 
     // --> we just need to close it 

      $this.removeClass("active"); 
      $this.parents(".accordion").find("span").css({transform:"rotate(0deg)", bottom:"0px"}); 
      $this.next(".accordion-invisible").slideUp(200); 

     } else { 
     // the "clicked" element is not showing 

      var $currentActive = $(".preview.active"); 
      if ($currentActive.length) { 
      // another element is opened 
      // we need to close it first 

       $currentActive.parents(".accordion").find("span").css({transform:"rotate(0deg)", bottom:"0px"}); 
       $currentActive.next(".accordion-invisible").slideUp(200); 
       $currentActive.removeClass("active"); 

      } 

      $this.next(".accordion-invisible").slideDown(200); 
      $this.parents(".accordion").find("span").css({transform:"rotate(90deg)", bottom:"10px"}); 
      $this.addClass("active"); 
     } 
    }); 
}); 

Here is a Pen

Answer 2

的jQuery的slideToggle函數有一個callback爲第二個參數

$('foo').slideToggle(200 , function() { 
//do something with span rotation ... 
}) 

也許，你需要嘗試使用類和CSS的轉變這一點。例如設置當前幻燈片的活動類。然後使用嵌套選擇器進行跨度;

(.active span {transform: rotate(90deg)})

Answer 3

你必須slideToggle創建一個回調函數，做你想做的事，該功能，您slideToggle結束後。

$(document).ready(function(){ 
    $(".preview").click(function(){ 
     $(this).next(".accordion-invisible").slideToggle(200); 
     //PUT CALL FUNCTION IN FOLLOWING LINE 
     $(".accordion .accordion-invisible").not($(this).next()).slideUp(200,function(){ 

     $('span').css({ 
      transform: 'rotate(0deg)', 
      bottom: '0px' 
     }); 

     $(this).find("span").css({ 
      transform: 'rotate(90deg)' 
     }); 

     $(this).parents(".accordion").find("span").css({ 
      transform: 'rotate(90deg)', 
      bottom: '10px' 
     }); 
     }); 
    }); 
}); 

Answer 4

用於切換例如手風琴我使用了jQuery肘節（）函數。你不需要上拉和下拉，切換就足夠了。這裏是代碼，也是箭頭。

$(document).ready(function(){ 
    $(".preview").click(function() { 
     var acc = $(this).next(".accordion-invisible"); 
     acc.toggle(200, function() { 
      if (acc.is(':visible')) { 
       acc.parent().find('.fa').css({ 
        transform:'rotate(90deg)' 
       }); 
      } else { 
       acc.parent().find('.fa').css({ 
        transform: 'rotate(0deg)' 
       }); 
      } 
     }); 
    }); 
}) 

如果手風琴是可見的，旋轉箭頭90deg，否則，旋轉0deg。 檢查codepen的一個工作示例：http://codepen.io/LevelZwo/pen/jWXKOX?editors=0010

Answer 5

您可以（也可能應該）用少得多的代碼來做到這一點。以下是一個使用純CSS進行轉換的示例; JavaScript是僅用於打開和關閉一類名：

$(document).ready(function() { 
 
    $('.preview').click(function() { 
 
    $(this).closest('.accordion').toggleClass('active'); 
 
    }) 
 
});

.preview { 
 
    cursor: pointer /* always indicate when something is clickable */ 
 
} 
 
.accordion-invisible, 
 
.accordion span.fa { 
 
    transition: all 1s; /* add browser prefixes as necessary */ 
 
} 
 
.accordion-invisible { 
 
    max-height: 0px; 
 
    overflow: hidden; 
 
} 
 
.accordion.active .accordion-invisible { 
 
    max-height: 500px; /* pick something reasonable for your content */ 
 
} 
 
.accordion.active span.fa { 
 
    transform: rotate(90deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
<div class="accordion"> 
 
    <h2><span class="fa fa-chevron-right"></span>Hallöchen Popöchen</h2> 
 
    <p class="preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
    <div class="accordion-invisible"> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    </div> 
 
</div> 
 
<div class="accordion"> 
 
    <h2><span class="fa fa-chevron-right"></span>Blindtext</h2> 
 
    <p class="preview">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    <div class="accordion-invisible"> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    </div> 
 
</div>