Javascript JS初学者级别：无法复制此JSFIDLE

我正在制作一个个人网站，网页分为2个部分。如果单击左侧，左侧部分将向右扩展，反之亦然

点击操作后，一个按钮可以重置整个事件。它在这个JSFiddle中非常有效：

但我不能复制它

“全部显示”按钮不起任何作用

我还注意到，JQuery的最新版本破坏了整个过程，因此我使用了v1.x，就像在原始示例中一样

我的JS技能相当有限。谢谢你的帮助

以下是原始代码：

$“左bg，右bg”。单击 作用{ $this.animate{'width'：'100%}，600.sides.animate{'width'：'0'}，600； $“全部展示” .附加到“包装器”； }; $'.show'.live'点击'， 作用{ $'left-bg'。设置动画 { “宽度”：“50%” },600; $'right-bg'。设置动画 { “宽度”：“50%” },600; $this.remove； }; 左背景{ 位置：绝对位置； 排名：0； 左：0； 底部：0； 背景色：000； 颜色：fff； 宽度：50%； 保证金：0； } 右背景{ 位置：绝对位置； 右：0； 底部：0； 排名：0； 背景色：fff； 颜色：000； 宽度：50%； 保证金：0； } .表演{ 位置：绝对位置； 底部：0； 左：50%； 左边距：-2.5em； 宽度：5em； } 剩下的东西

正确的东西

剩下的东西

正确的东西

在页面中添加JQuery库引用 更新函数如下：

$(function(){
        $('#left-bg, #right-bg').click(
            function(){
            $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
            $('<button class="show">Show all</button>')
                .appendTo('#wrapper');
        });
          $(document).on('click','.show',
                                function(){
                                    $('#left-bg').animate(
                                        {
                                            'width': '50%'
                                        },600);
                                    $('#right-bg').animate(
                                        {
                                            'width': '50%'
                                        },600);
                                    $(this).remove();
                                });
    });

试试这个，行吗 $'.show'。单击，函数{

或

$document.on'click'，'show'，函数{

因为jQuery.live在1.9版以后的版本中已被删除

---

.on方法将事件处理程序附加到jQuery对象中当前选定的元素集。从jQuery 1.7开始，.on方法提供附加事件处理程序所需的所有功能。有关从旧的jQuery事件方法转换的帮助，请参阅.bind、.delegate和.live。要删除与.on绑定的事件，请参阅.off。要附加n仅运行一次然后自行删除的事件，请参见。一

非常感谢您回复我，我非常感谢您的帮助

最后，我决定在CSS中通过一个非常小的JS点击来欺骗操作。 我在这里借了密码

---

您是否在任何地方导入JQuery？它们会中断，因为live在很多年前就被弃用了

<div class="box transform">
</div>
<input type="button" id="button" value="Click Me"></input>

  ================

.box {
  background-color: #218D9B;
  height: 100px;
  width: 100px;
}

.transform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.transform-active {
  background-color: #45CEE0;
  height: 200px;
  width: 200px;
}
  ================

$("#button").click(function() {
  $('.transform').toggleClass('transform-active');
});