javascript - jQuery 追加 style="overflow: hidden;"

Question

メニューを非表示にするコードを少し作成しました。メニューは完全ではありませんが、jQuery.slideUp()関数を使用しようとしていますが、コードに追加style="overflow: hidden;"されるため、.show を使用すると、要素の 1 つが非表示に#nav:afterなり#nav:before、小さな矢印が追加されますメニューの一番下へ

ここにjsコードがあります

  $("span#start_button").click(function () {
        if ($("#nav").is(":hidden")) {
            $("#nav").show("fast");
        } else {
            $("#nav").slideUp();
        }
    });

そして、これがこのサイトの結果です

.slideUp()の作成を停止するにはどうすればよいstyle="overflow: hidden;"ですか?

Answer 1

overflow:hidden関数のコールバックでを削除して、slideUp()試すことができるようにする必要があります

$("#nav").slideUp('fast', function(){ $('#nav').css('overflow','visible') });

または、cssで強制することもできます

#nav{overflow:visible!important}

Answer 2

これは古い jquery のバグです。このコードは、標準関数「slideDown」を置き換え、オーバーフロー プロパティを削除します。

!(function (jQuery, origSlideDown) {
jQuery.fn.slideDown = function (speed, easing, callback) {
    var self = this;
    var args = Array.prototype.slice.call(arguments);
    var origCallback;

    for (var i = 0, len = args.length; i < len; i++) {
        if (jQuery.isFunction(args[i])) {
            origCallback = args[i];
            args[i] = function () {
                origCallback.call(this);
                self.css('overflow', '');
            }
        }
    }

    if (!origCallback) {
        args.push(function () {
            self.css('overflow', '');
        });
    }

    return origSlideDown.apply(this, args);
};
})(jQuery, jQuery.fn.slideDown);

Answer 3

そのスタイルをオーバーライドする-

   $("#nav").slideUp();
   $("#nav").css({'overflow':'visible'});

Answer 4

html の style 属性を変更して、デフォルトのスタイルをオーバーライドします。

else {
       $("#nav").slideUp();
       $("#nav").attr("style","overflow:visible");
    }

Answer 5

これを試して...

else {
   $("#nav").slideUp();
   $("#nav").css("overflow","visible");
}