改变.CSS(） 当 .滑动切换(）

Change .CSS() when .SlideToggle()

本文关键字：CSS 改变      更新时间：2023-09-26

>我用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：你可以在这里找到它 有人知道吗？

我会稍微

重写一下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");
        }
    });
});

这是一支笔

您必须

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

为了切换这样的手风琴，我使用 jQuery 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 度。检查代码笔以获取工作示例：http://codepen.io/LevelZwo/pen/jWXKOX?editors=0010

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

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

也许，您需要尝试为此使用类和CSS过渡。例如，为当前幻灯片设置活动类。然后使用嵌套选择器进行跨度;

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

你可以（并且可能应该）用更少的代码来做到这一点。 下面是一个使用纯 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>

相关文章：