Question

我想要做的是下次我点击.div最后一个动画并制作其他功能的功能，我仍然不知道该怎么做

$(".div").click(function() {
    /*with this code i make that the next time i open .show, the last one closes */
    $(this).next('.show').slideToggle();
    $(this).parent().siblings().children().next().slideUp();
    /*here i use a flag to slide a div and make some animations*/
    if (!$(this).hasClass("flag")) {
        $(this).animate({
            marginLeft: '-=400px'
        }, 100);
        $(this).addClass("flag");
        $(this).find("h1").animate({
            backgroundColor: 'black'
        }, 500);
        $(this).find("h1").css("color", "white");
        $(this).find("h1").addClass("class1");
    } else {
        $(this).animate({
            marginLeft: '+=400px'
        }, 100);
        $(this).removeClass("flag");
        $(this).find("h1").animate({
            backgroundColor: 'transparent'
        }, 500);
        $(this).find("h1").css("color", "black");
        $(this).find("h1").removeClass("class1");
    };
    return false;
});

Answer 1

我建议在切换点击的项目时隐藏所有其他项目。

在下面的演示中，我创建了两个函数：一个用于＆＃34;切换＆＃34;和一个隐藏＆＃34;项目。
通过操纵＆＃34;打开＆＃34;来显示/隐藏项目。分类和滑动相关内容单击某个项目时，将隐藏未单击的所有项目，并切换单击的项目。

我使用CSS transition为标题设置了动画，但如果您愿意，可以使用jQuery 实现＆＃34; slideDown＆＃34;更难以实现。使用CSS转换的效果，所以我使用了jQuery。

我还将.first().click()链接到点击处理程序选择器的末尾，以便第一个项目自动打开。

＆＃13;

var $containers = jQuery('.container');

function toggleItem($item) {
  $item.toggleClass('open');
  $item.find('.content').slideToggle(200);
}

function hideItem($item) {
  $item.removeClass('open');
  $item.find('.content').slideUp(200);
}

jQuery('h1',$containers).on('click', function() {
  
  var $container = jQuery(this).parent();
  
  hideItem($containers.not($container));
  toggleItem($container);
  
}).first().click();

＆＃13;

.container {
  font-size:14px;
}
.container .content {
  display: none;
  margin:1em 0;
}
.container h1 {
  font-size:1.5em;
  margin:0;
  padding-left: 0;
  color: black;
  -webkit-transition: padding-left .2s, color .2s, background-color .2s;
  transition: padding-left .2s, color .2s, background-color .2s;
}
.container.open h1 {
  padding-left: 40px;
  color: white;
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>TITLE</h1>
  <div class="content">CONTENT<br />CONTENT<br />CONTENT</div>
</div>
<div class="container">
  <h1>TITLE</h1>
  <div class="content">CONTENT<br />CONTENT<br />CONTENT</div>
</div>
<div class="container">
  <h1>TITLE</h1>
  <div class="content">CONTENT<br />CONTENT<br />CONTENT</div>
</div>

＆＃13;

使用next（）向右滑动;

1 个答案: