Question

我有两个方框，第一个方框有 “打开” <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>的文本（通过Inspect Element检查）。但是，当我点击 “关闭” <button>时，它无效。这里似乎有什么问题？我甚至在alert(1)上尝试$('#close')，看看它是否确实看到关闭 ID，但没有运气。

jsFiddle here。

Answer 1

如果你改变

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

到这个

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

然后这将像this demo一样工作，但您也可以通过this demo等其他方式使其工作。

Answer 2

您需要使用live()。

同时制作近似动画right: '20%'

工作jsFiddle

Answer 3

尝试使用toggle而不更改其ID demo

$('#open').toggle(function() {
    $('#box1').animate({
        right: '50%'
    }, 500, function() {
        $('#open').text('Close');
    });
}, function(){
    $('#box1').animate({
        right: '20%'
    }, 500, function() {
        $('#open').text('Open');
    });
});

Answer 4

Working Demo

另一个演示感谢@Sheikh：DEMO

希望它适合您的事业:)

<强>码

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

Answer 5

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

我已经调整了上面的代码并创建了一个底部滑块，可以显示一个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>

JAVA：

$(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;
}

div滑开然后关闭

5 个答案: