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

jquery SlideToggle函数有一个callback作为第二个参数

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

也许，您需要尝试使用Classes和CSS转换。例如，为当前幻灯片设置活动类。然后使用嵌套选择器作为span;

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

Answer 2

您需要在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 3

我会稍微重写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"); } }); });并打开所点击的。{/ p>

timestamp

Here is a Pen

Answer 4

为了切换这样的手风琴，我使用jQuery toggle（）函数。你不需要slideUp和slideDown，切换就足够了。这是代码，也是箭头。

 $(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)'
                });
            }
        });
    });
})

如果手风琴可见，旋转箭头90度，否则旋转0度。检查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>

.SlideToggle（）时更改.CSS（）

5 个答案: