1
我在页面上有9个方格,当你点击一个正方形时,我想要一个完整宽度的div出现在它的下方,并将方框向下推。Expand div/div divs push div divs down the page
我一直在试图按照教程了解这背后的JS,但我无法得到它的工作。
Codepen: http://codepen.io/SaraTez/pen/QEmPjX
<ul class="grid-list">
<li class="li">One</li>
<li class="li">Two</li>
<li class="li">Three</li>
<li class="li">Four</li>
<li class="li">Five</li>
<li class="li">Six</li>
<li class="li">Seven</li>
<li class="li">Eight</li>
<li class="li">Nine</li>
<li class="li">Ten</li>
</ul>
JS
$(".grid-list .li").click(function(){
var .li=$(this);
if ($(this).hasClass("active")) {
$(".grid-list .li.cloned-expand").remove();
$(".grid-list .li").removeClass("active");
}
else {
$(".grid-list .li.cloned-expand").remove();
$(".grid-list .li").removeClass("active");
var cloned=.li.clone().addClass("cloned-expand").append("<span class='cloned-expand-close'>X</span>");
.li.addClass("active").after(cloned);
$('html, body').animate({
scrollTop: $(this).offset().top
}, 400);
}
});
$(document).on("click", ".cloned-expand-close", function(){
$(".grid-list .li.cloned-expand").remove();
$(".grid-list .li").removeClass("active");
});
的框显示,因为他们应该,但没有功能上发生的点击,所以我认为这是一个JS问题/语法与我的HTML 。
任何人都可以帮助解决这个问题吗?或者,如果您已经看到我最终希望实现的任何良好示例,那将是好的
这并感谢你 - 不要吝啬在评论中开始一个新问题,但很容易停下来它是从克隆数字并在div中放入不同的内容? – user3005003
就像你想改变李元素里面的文字,对吧? – Thinker
最终我想广场是图像,然后看起来像包含一些文本的div – user3005003