我的页面上有 3 个 div 元素，每个元素都有相同的 CSS 类“.shape”
在我的 JS 中，我想定位当前单击的“.shape”，以便通过 jQuery SlideDown 过渡将一些额外的 html 插入到“.shape”的底部。
当你再次点击“.shape”时，多余的html就会向上滑动。
我如何以简单的方式做到这一点？
我拥有的：
$(".shape").click(function() {
var id = $(this).attr("id");
var selected = id + "-reveal";
});
在我的 HTML 中，
<div class="shape" id="shape1">Content</div>
<div class="hidden" id="shape1-reveal">Content</div>
<div class="shape" id="shape2">Content</div>
<div class="hidden" id="shape2-reveal">Content</div>
<div class="shape" id="shape3">Content</div>
<div class="hidden" id="shape3-reveal">Content</div>
我也不知道如何添加切换+滑动效果。
编辑：
解决方案http://codepen.io/vennsoh/pen/rVjeQy http://codepen.io/vennsoh/pen/rVjeQy
不确定我编写 JS 的方式是否是最优雅的方法。
定位点击的元素$(this)
$(".shape").click(function() {
var clickedShape = $(this);
});
一旦你有$(this)，您可以使用其中的目标元素find() https://api.jquery.com/find/.
或者如果是 HTML，请使用next() https://api.jquery.com/next/找到形状后面的显示元素。
找到合适的元素后，您可以slideUp() https://api.jquery.com/slideUp/, slideDown() https://api.jquery.com/slideDown/, or slideToggle() https://api.jquery.com/slideToggle/.
Example
$(".shape").click(function() {
var revealThing = $(this).next();
revealThing.slideToggle();
});
http://jsfiddle.net/yopp6L22/1/ http://jsfiddle.net/yopp6L22/1/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
