Question

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

点击动作后，一个按钮可以重置整个事情。它在这个JSFiddle中很有用：http://jsfiddle.net/davidThomas/CFNUJ/1/

但我无法复制它（http://guillaumeb.com/jsfiddle/split.html）

“全部显示”按钮无效...

另外我注意到更新版本的JQuery打破了整个事情所以我使用v 1.x，就像在原始示例中一样。

我的JS技能非常有限。任何帮助表示赞赏

以下是原始代码：

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

#left-bg {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background-color: #000;
            color: #fff;
            width: 50%;
            margin: 0;
        }
        
        #right-bg {
            position: absolute;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: #fff;
            color: 000;
            width: 50%;
            margin: 0;
        }
        
        .show {
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -2.5em;
            width: 5em;
        }

   <div id="wrapper">
        <div id="left-bg">
            <p>Left stuff</p>
        </div>
        <div id="right-bg">
            <p>Right stuff</p>
        </div>
    </div>
    <div id="wrapper">
        <div id="left-bg">
            <p>Left stuff</p>
        </div>
        <div id="right-bg">
            <p>Right stuff</p>
        </div>
    </div>

Answer 1

在页面中添加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();
                                });
    });

Answer 2

试试这个可能有效 $（＆＃39; .show＆＃39）。在（＆＃39;单击＆＃39;，函数（）{

或

$（文件）。在（＆＃39;单击＆＃39;＆＃39; .show＆＃39;，函数（）{

因为jQuery .live（）已在1.9版本中删除。

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

Answer 3

非常感谢回到我身边，感谢你的帮助。

最后我决定在CSS中执行此操作，只需单击即可通过一个非常小的JS来欺骗操作。我借用了这里的代码

https://codepen.io/thetallweeks/pen/boinE

<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');
});

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

3 个答案: