Question

当我尝试隐藏一个内部div（包含一个句子）时，使用切换宽度按钮调整外部div的大小。

e.g。外部div以300px宽开始，当点击一个按钮时，它缩小到200px宽。

如果外部div的大小调整为小于240px（例如），则内部div完全隐藏。然后，如果按钮切换，则内部dic重新出现。

$(document).ready( function(){
    $('#toggle-button').click( function() {
        var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
        $('#toggle').animate({ width: toggleWidth });
    });
});

一旦宽度变小，我就不知道如何让内部div隐藏起来。

任何帮助都会很棒。感谢。

Answer 1

DEMO

$(document).ready( function(){
    $('#toggle-button').click( function() {
        var toggleWidth = $("#toggle").width() == 300 ? 200 : 300;
        $('#toggle').animate({ width: toggleWidth + "px"});
        (toggleWidth < 240) ? $(".hide", "#toggle").hide() : $(".hide", "#toggle").show();
    });
});

Answer 2

jsFiddle

要在动画期间隐藏/显示，您可以使用step回调方法

$(document).ready(function () {
    $('#toggle-button').click(function () {
        var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
        $('#toggle').animate({
            width: toggleWidth
        }, {
            step: function (currentWidth) {
                $(this).find('.hide').toggle(currentWidth<240?false:true);
            }
        });
    });
});

Answer 3

您可以使用以下方法隐藏切换div：

$("#toggle").hide();

你也可以使用动画：

 $("#toggle").hide(1000);

这是你想要的吗？

如果外部div的大小小于240px，则隐藏内部div

3 个答案: