Question

在我的公司网站上，我正在尝试创建一个Meet the Team部分，其中我有一排四个团队成员的缩略图，我希望他们的生物片在缩略图点击时滑动/淡入下方并滑动/淡出时再次单击缩略图。

我通过以下代码实现了这一目标：

$(".team-desc").hide(); //hide all the team descriptions


  $(".team-toggle").click(function () {
        var divname= this.getAttribute('data-team');
          $("#"+divname)
          .slideToggle("slow")
          .animate(
            { opacity: 1 },
            { queue: false, duration: 'slow' }
            )
          .siblings()
          .hide();
        });

这几乎就像预期一样。

我想要实现的是一种在bios之间消失的方法，如果一个bio已经可见，以避免在团队成员bios之间切换时我目前得到的崩溃然后扩展效果。

我认为这需要通过测试目前是否可见任何生物div来完成，但我不确定如何使代码成为可行的。

非常感谢任何帮助或指示。

我的html标记是：

<li class="team-toggle" data-team="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></li>

和

<div class="team-desc" id="<?php the_title(); ?>">
   <?php the_content(); ?>
</div>

Answer 1

$(".team-desc").hide();

$(".team-toggle").click(function () {
    var divname = $(this).data('team'),
        visible = $(".team-desc").is(':visible');

    if (visible) {
        $("#"+divname).fadeIn('slow').siblings(':visible').fadeOut('slow');
    }else{
        $("#"+divname)
              .slideToggle("slow")
              .animate(
                { opacity: 1 },
                { queue: false, duration: 'slow' }
               )
              .siblings()
              .hide();
    }
});

Answer 2

您始终可以使用$.each()选择所有元素，并使用以下内容对其进行操作：

$('.your-elements').each(function(){
    $(this).click(function() {
    if ($(this).is(':visible')) {
        $('.your-elements').not($(this)).stop().animate({
           // ...
        });
    } else {
        $(this).stop().animate({
            // ...
        });
        $('.your-elements').not($(this)).stop().animate({
           // ...
        });
    }
    });
});

如果所有div隐藏，否则我如何使用jQuery slideToggle否则在div之间淡出？

2 个答案: