Javascript 展开/折叠将div向下推到页面上方的div

我在一个页面上有9个方块，当你点击一个方块时，我想在它下面出现一个全宽的div，然后把上面的方块往下推

我一直试图按照一个教程来理解这背后的JS，但我无法让它工作

代码笔：

一个
两个
三个
四个
五个
六个
七
八个
九
十

JS

$（“.grid list.li”）。单击（函数（）{
变量li=$（本）；
if（$（this）.hasClass（“活动”））{
$（“.grid list.li.expand”）.remove（）；
$（“.grid list.li”）.removeClass（“活动”）；
}
否则{
$（“.grid list.li.expand”）.remove（）；
$（“.grid list.li”）.removeClass（“活动”）；
var cloned=.li.clone（）.addClass（“cloned expand”）.append（“X”）；
.li.addClass（“活动”）。之后（克隆）；
$（'html，body'）。设置动画({
scrollTop:$（this）.offset（）.top
}, 400);
}
});
$（文档）.on（“单击”、“.clone展开关闭”，函数（）{
$（“.grid list.li.expand”）.remove（）；
$（“.grid list.li”）.removeClass（“活动”）；
});

这些框按其应有的方式显示，但单击时没有任何功能发生，因此我认为这是我的html的JS问题/语法

---

谁能帮我修一下吗？或者，如果您看到了我最终想要实现的目标的任何好例子，那将是好的

它不起作用，因为您错误地定义了变量

定义如下：

var li=$(this);

$（“.grid list.li”）。单击（函数（）{
var li=$（本）；
if（$（this）.hasClass（“活动”））{
$（“.grid list.li.expand”）.remove（）；
$（“.grid list.li”）.removeClass（“活动”）；
}
否则{
$（“.grid list.li.expand”）.remove（）；
$（“.grid list.li”）.removeClass（“活动”）；
var cloned=li.clone（）.addClass（“cloned expand”）.append（“X”）；
li.addClass（“活动”）。之后（克隆）；
$（'html，body'）。设置动画({
scrollTop:$（this）.offset（）.top
}, 400);
}
});
$（文档）.on（“单击”、“.clone展开关闭”，函数（）{
$（“.grid list.li.expand”）.remove（）；
$（“.grid list.li”）.removeClass（“活动”）；
});
*{
框大小：边框框；
}
李先生{
显示：内联块；
宽度：15%；
高度：100px；
线高：100px；
边框：1px实心；
利润率：01%10px0；
文本对齐：居中；
位置：相对位置；
光标：指针；
&：悬停{
背景色：#eee；
}
李：积极的{
背景色：#eee；
&：之后{
内容：''；
身高：0；
宽度：0；
左边框：10px实心透明；
右边框：10px实心透明；
边框顶部：10px实心#000；
位置：绝对位置；
底部：-10px；
左：50%；
左边距：-5px；
}
}
}
.克隆扩展{
显示：块；
浮动：左；
最小高度：80px；
宽度：97%；
利润率：0.10px；
填充：10px 30px；
-webkit动画：fadeinLoad.5s向前；
-moz动画：fadeinLoad.5s向前；
动画：fadeinLoad.5s向前；
&-接近{
位置：绝对位置；
右：-1px；
顶部：-1px；
高度：20px；
宽度：20px；
线高：20px；
边框：1px实心；
文本对齐：居中；
光标：指针；
}
}
}
@-webkit关键帧fadeinLoad{
从{opacity:0；}
到{opacity:1；}
}
@-moz关键帧fadeinLoad{
来自{opacity:0；-moz变换：translate（0，-20px）；}
到{opacity:1；-moz变换：translate（0，0）；}
}
@关键帧淡入淡出{
来自{opacity:0；transform:translate（0，-20px）；}
到{opacity:1；transform:translate（0，0）；}
}


一个
两个
三个
四个
五个
六个
七
八个
九
十
谢谢你-这并不意味着在评论中提出新的问题，但是很容易阻止它克隆数字并在div中添加不同的内容吗？就像你想更改li元素中的文本一样，对吗？最终我希望正方形是图像，然后，看起来包含一些文本的div实际上在span本身中，您可以将这些文本添加到该div并附加它，就像您在单击函数append（“X”）中所做的那样；
$(".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");
});

var li=$(this);