Возможно, выходит за рамки функции щелчка JQuery

Question

Создание этой темы WordPress портфолио в стиле ajax, и я немного застрял в том, как сделать эту последнюю маленькую вещь.

В основном, скажем, вы нажимаете ссылку "О программе" в правом верхнем углу, она будет загружатьсясодержимое этой страницы в div.Теперь, когда щелкнул тот, как мне указать, что, если эту ссылку снова щелкнуть, чтобы она не загружала содержимое снова?

Теперь вы подумаете о том, чтобы использовать длину, но это не проблема.

Вот ссылка на текущую тему http://themes.thefinishedbox.com/portfolio/

Вот javascript, используемый для верхней навигации:

$(function() {
    $('#navigation ul > li a').each(function() {

        $(this).click(function(e) {

            $.ajaxSetup ({  
                cache: false  
            });

            e.preventDefault();

            var $href = $(this).attr('href'); 

            var $loader = '<div id="whiteLoader" />';

            if($('#page').length == 0) {

                $('<div id="page" />').insertAfter('#header');

                $('#page').queue(function() {
                    $(this).animate({height: '120px'}, 300);
                    $(this).html($loader);
                    $(this).animate({backgroundColor: '#fff'}, 300);
                    $(this).dequeue();                    
                });

                $('#page').queue(function() {
                    $('#page').load($href + ' #pageEntry', function() {
                        var $height = $('#pageEntry').height();
                        var $h = $height + 16;
                        $(this).animate({height: $h + 'px'}, 600, function() {
                            $(this).css({height: 'auto'});
                        });
                        // This is the sort of thing I'm trying to achieve
                        // is it out of scope? Not sure of the correct way
                        // to achieve this.
                        e.click(function() { return false; }); 
                    });
                    $(this).dequeue();
                });

            } else {

                $('#pageEntry').animate({height: 0}, 600, function() {

                    $(this).remove();

                    $('#page').queue(function() {
                        $(this).animate({height: '120px'}, 300);
                        $(this).html($loader);
                        $(this).animate({backgroundColor: '#fff'}, 300);
                        $(this).dequeue();                    
                    });

                    $('#page').queue(function() {
                        $('#page').load($href + ' #pageEntry', function() {
                            var $height = $('#pageEntry').height();
                            var $h = $height + 16;
                            $(this).animate({height: $h + 'px'}, 600, function() {
                                $(this).css({height: 'auto'});
                            });
                        });
                        $(this).dequeue();
                    });

                });
            }

        });

    });
});

Не беспокойтесь о выражении else прямо сейчас, см.к комментарию, я делаю это правильно?Вне сферы?Конечно, кто-то сталкивался с этой проблемой раньше.

Любая помощь будет принята с благодарностью.

ps Я знаю, что многие код может быть уменьшен, я сделаю это позже.

Answer 1

Есть много способов сделать это, и лучше использовать, например, one. Однако в вашем существующем коде, похоже, есть одна проблема: e - это аргумент события, а не элемент, по которому щелкнули. Вы могли бы сделать что-то вроде этого:

$(function() {
    $('#navigation ul > li a').each(function() {

        $(this).click(function(e) {

            $.ajaxSetup ({  
                cache: false  
            });

            e.preventDefault();

            var $href = $(this).attr('href'), $thelink = $(this); 

            var $loader = '<div id="whiteLoader" />';

            if($('#page').length == 0) {

                $('<div id="page" />').insertAfter('#header');

                $('#page').queue(function() {
                    $(this).animate({height: '120px'}, 300);
                    $(this).html($loader);
                    $(this).animate({backgroundColor: '#fff'}, 300);
                    $(this).dequeue();                    
                });

                $('#page').queue(function() {
                    $('#page').load($href + ' #pageEntry', function() {
                        var $height = $('#pageEntry').height();
                        var $h = $height + 16;
                        $(this).animate({height: $h + 'px'}, 600, function() {
                            $(this).css({height: 'auto'});
                        });
                         $thelink.unbind(e);
                    });
                    $(this).dequeue();
                });

            } else {

                $('#pageEntry').animate({height: 0}, 600, function() {

                    $(this).remove();

                    $('#page').queue(function() {
                        $(this).animate({height: '120px'}, 300);
                        $(this).html($loader);
                        $(this).animate({backgroundColor: '#fff'}, 300);
                        $(this).dequeue();                    
                    });

                    $('#page').queue(function() {
                        $('#page').load($href + ' #pageEntry', function() {
                            var $height = $('#pageEntry').height();
                            var $h = $height + 16;
                            $(this).animate({height: $h + 'px'}, 600, function() {
                                $(this).css({height: 'auto'});
                            });
                        });
                        $(this).dequeue();
                    });

                });
            }

        });

    });
});

Answer 2

Вы можете использовать функцию one(), чтобы гарантировать, что обработчик событий запускается только один раз.В качестве альтернативы, вы можете использовать data(), чтобы связать логическое значение с элементом, указывающее, является ли элемент в данный момент «активным» (т.е. отображает ли его содержимое).Для справки, обе эти функции являются функциями JQuery.