0

以下のコードを何週間も解決しようとしてきましたが、何が問題なのかわかりません。以下は、アイコンが選択されたときに左側からメニューをスライドインおよびスライドアウトします。また、Facebook アプリのように要素を右側に動かします。ただし、ブラウザーのサイズに応じて少し異なる必要があります (ページ上のさまざまな要素を移動する必要があります)。ドキュメントの準備ができている場合は正常に動作しますが、ブラウザのサイズを変更すると、何度もスライドインおよびスライドアウトしようとし、サイズに応じて正しいスライド機能を実行しません。誰でもアドバイスできますか？

var menuInitialized = false;

function doMenu() {

$(".c_left, .top_right, .c_right, .c_myaccount, .header_image, .c_footer, .copyright, .accepts, .myaccount, .header_logo").removeAttr('style');

var $menu = $(".c_left");
var width = $(window).width();
var status = 'closed';

if (width < 550) {
    if (!menuInitialized) {
        $('.icon-menu-2').on('click', function(event) {
            alert('small'); //test which is being activated onclick
            if (status === 'closed') {
                $menu.animate({
                    width: 185,
                    marginLeft: 0,
                    display: 'toggle'
                }, 'fast');
                $(".top_right, .c_right, .c_myaccount, .c_footer, .copyright, .accepts").animate({
                    marginLeft: 185,
                    display: 'toggle'
                }, 'fast');
                $(".myaccount").animate({
                    marginRight: -185,
                    display: 'toggle'
                }, 'fast');
                return status = 'open';
            } else if (status === 'open') {
                $menu.animate({
                    width: 0,
                    marginLeft: -185,
                    display: 'toggle'
                }, 'fast');
                $(".top_right, .c_right, .c_myaccount,.c_footer, .copyright, .accepts").animate({
                    marginLeft: 0,
                    display: 'toggle'
                }, 'fast');
                $(".myaccount").animate({
                    marginRight: 0,
                    display: 'toggle'
                }, 'fast');
                return status = 'closed';
            }
        });
        menuInitialized = true;
    }
} else if ((width < 800) && (width > 550)) {
    if (menuInitialized) {
        $('.icon-menu-2').on('click', function(event) {
            alert('large'); //test which is being activated onclick
            if (status === 'closed') {
                $menu.animate({
                    width: 185,
                    marginLeft: 0,
                    display: 'toggle'
                }, 'fast');
                $(".top_right, .c_right, .c_myaccount, .header_image, .c_footer, .copyright, .accepts").animate({
                    marginLeft: 185,
                    display: 'toggle'
                }, 'fast');
                $(".myaccount, .header_logo").animate({
                    marginRight: -185,
                    display: 'toggle'
                }, 'fast');
                return status = 'open';
            } else if (status === 'open') {
                $menu.animate({
                    width: 0,
                    marginLeft: -185,
                    display: 'toggle'
                }, 'fast');
                $(".top_right, .c_right, .c_myaccount, .header_image,.c_footer, .copyright, .accepts").animate({
                    marginLeft: 0,
                    display: 'toggle'
                }, 'fast');
                $(".myaccount, .header_logo").animate({
                    marginRight: 0,
                    display: 'toggle'
                }, 'fast');
                return status = 'closed';
                }
            });
            menuInitialized = false;
        }
    }
}
$(document).ready(doMenu);
$(window).resize(doMenu);
4

3 に答える 3

1

このようなものかもしれません：

var timeoutResize;
$(window).resize(function(){ 
        clearTimeout(timeoutResize);
        timeoutResize = setTimeout(doMenu,50);

    });
于 2013-04-12T15:00:15.003 に答える
0

クリック機能のバインドを解除する必要がありました。$('.icon-menu').unbind('click');

于 2013-04-15T11:13:37.273 に答える
0

ローストのソリューションが機能するはずです。ほとんどのブラウザーでは、ウィンドウのサイズが変更されると、サイズ変更イベントが継続的に発生します。ハンドラーで行っていることによっては、ハンドラー コードを実行する前に、サイズ変更が完了するのを待つために遅延を導入する必要がある場合があります。

于 2013-04-12T15:18:33.767 に答える