在 .SlideToggle() 时更改 .CSS()

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 ...
})

也许，您需要为此尝试使用类和 CSS 转换。例如，为当前幻灯片设置活动 class。然后对跨度使用嵌套选择器；

(.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）到当前活动的手风琴。如果点击的元素有 class .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 4

为了切换此类手风琴，我使用 jQuery toggle() 函数。你不需要 slideUp 和 slideDown，toggle 就够了。这是代码，也用于箭头。

 $(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()

Change .CSS() when .SlideToggle()

javascript

jquery

html

css

slidetoggle