在jquery中滑动div

时间:2016-07-15 16:47:02

标签: jquery jquery-selectors slideup

我有以下divs

users:
 - default
disable_root: 1
ssh_pwauth:   0
locale_configfile: /etc/sysconfig/i18n
mount_default_fields: [~, ~, 'auto', 'defaults,nofail', '0', '2']
resize_rootfs_tmp: /dev
ssh_deletekeys:   0
ssh_genkeytypes:  ~
syslog_fix_perms: ~
cloud_init_modules:
 - bootcmd
 - write-files
 - resizefs
 - set_hostname
 - update_hostname
 - update_etc_hosts
 - rsyslog
 - users-groups
 - ssh
cloud_config_modules:
 - mounts
 - locale
 - set-passwords
 - timezone
 - runcmd
cloud_final_modules:
 - scripts-per-once
 - scripts-per-boot
 - scripts-per-instance
 - scripts-user
 - ssh-authkey-fingerprints
 - keys-to-console
 - final-message
system_info:
  distro: rhel
  default_user:
    name: ec2-user
  paths:
    cloud_dir: /var/lib/cloud
    templates_dir: /etc/cloud/templates
  ssh_svcname: sshd
EOF

点击跨度,我想向上滑动,这样只有前3个div有类' notspecial'是可见的。 我尝试了以下代码,但它以错误的顺序向上滑动

<div class="OffersContainer">
    <div class='special'>A</div>
    <div class='notspecial'>B</div>
    <div class='notspecial'>C</div>
    <div class='notspecial'>D</div>
    <div class='notspecial'>E</div>
    <div class='notspecial'>E</div>
    <span>Show more</span>
</div>

1 个答案:

答案 0 :(得分:2)

$(".OffersContainer > span").on("click", function(){
  $(".special, .notspecial:gt(2)").slideUp();
});//
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="OffersContainer">
    <div class='special'>A</div>
    <div class='notspecial'>B</div>
    <div class='notspecial'>C</div>
    <div class='notspecial'>D</div>
    <div class='notspecial'>E</div>
    <div class='notspecial'>E</div>
    <span>Show more</span>
</div>