2

我有一个两个盒子，第一个盒子有一个“打开” <button>

<div id="box1">
    <button id="open" type="button">Open</button>
</div>
<div id="box2"></div>​

单击“打开” <button>时，第一个框将向左滑动 50%，然后将“打开”按钮更改为“关闭”按钮。我想出了这个 jQuery 解决方案：

$(function() {
    $('#open').on('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $('#close').on('click', function() {
        $('#box1').animate({
            left: '50%'
        }, 500, function() {
            // alert('done');
        });
    });
});​

我设法更改了（通过检查元素检查）的ID和文本。<button>但是，当我单击“关闭” <button>时，它不起作用。这里似乎有什么问题？我什至尝试alert(1)查看$('#close')它是否确实看到了Close ID但没有运气。

jsFiddle在这里。

4

5 回答 5

3

如果你改变你的

$('#close').on('click', function(){...});

对此

$('#box1').on('click', '#close', function(){...});

那么这将像这个演示一样工作，但你也可以让它像这个演示一样以其他方式工作。

于 2012-10-19T07:35:34.913 回答
1

您需要使用live()。

也制作近距离动画right: '20%'

工作的jsFiddle

于 2012-10-19T07:20:11.510 回答
1

尝试使用toggle而不更改它的 id 演示 

$('#open').toggle(function() {
    $('#box1').animate({
        right: '50%'
    }, 500, function() {
        $('#open').text('Close');
    });
}, function(){
    $('#box1').animate({
        right: '20%'
    }, 500, function() {
        $('#open').text('Open');
    });
});
于 2012-10-19T07:20:17.113 回答
1

工作演示

另一个演示感谢@Sheikh：演示

希望它适合你的事业:)

代码

   $(function() {
    $('#open').on('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $(document).on('click', '#close', function() {
        $('#box1').animate({
            left: '50%'
        }, 500, function() {
            alert('done');
        });
    });
});​
于 2012-10-19T07:20:25.503 回答
1

在搜索弹出式底部滑动框时，我在 Google 上遇到了这个问题。

我已经修改了上面的代码并创建了一个底部滑块，它会显示一个 iframe，如果你想显示一个关于页面的快速调查，那就完美了。

演示：http: //jsfiddle.net/redwall/r5FBm/3/

HTML：

<div id="box1">
<button id="open" type="button">Open</button>
<br />
<br />
<br />
<iframe src="http://www.example.com" width="100%" height="170" frameborder="0" scrolling="no">
    <p>Your browser does not support iframes.</p>
</iframe>

爪哇：

$(function () {
$('#open').on('click', function () {
    $('#box1').animate({
        height: '230px'
    }, 500, function () {
        $('#open').text('Close').attr('id', 'close');
    });
});

$('#box1').on('click', '#close', function () {
    $('#box1').animate({
        height: '50px'
    }, 500, function () {
        $('#close').text('Open').attr('id', 'open');
    });
});

});

CSS：

    #box1 {
    position:absolute;
    bottom:0;
    height:50px;
    width:100%;
    background:#FF800D;
    overflow:hidden;
}
button {
    position:absolute;
    right:0;
}
于 2013-04-18T10:48:52.110 回答