JQuery - переход меню слайдов вверх / вниз слайдов - PullRequest
Новая
       16

JQuery - переход меню слайдов вверх / вниз слайдов

0 голосов
/ 14 декабря 2011

Попытка создать плавную панель навигации с несколькими кнопками, а затем при нажатии на каждую кнопку выпадает небольшое деление с соответствующей информацией.

Однако у меня возникают проблемы с тем, чтобы заставить его работать правильно, когда, скажем, вы нажимаете на кнопку, он начинает открывать div, затем вы нажимаете на другую кнопку, у него возникают некоторые проблемы с загрузкой нужного контента в универсальный div, используемый для отобразить содержимое кнопки.

Какой лучший способ исправить это так, что если вы начнете открывать div с одной кнопки, а затем нажмете другую очень быстро, она скроет / остановит первую попытку и сразу же перейдет ко 2-й? Прямо сейчас, если я это сделаю, он не будет загружать контент должным образом, так как .empty () будет выполняться после начала отображения нового div.

Сейчас я просто использую функцию setTimeout, чтобы задержать ее, но она не работает правильно.

* ПРИМЕЧАНИЕ. Я использую .on вместо простого .click, поскольку меню создается динамически в зависимости от того, на какой странице находится пользователь. Это работает просто найти в привязке события click. 

//CONTROL BAR 
    //CLICK OFF OF FORMS
    $(document).on('click','.clear_overlay, .control_bar',function(){
        hideForm();
    });
    //SHOW FORM
    $(document).on('click','.control_bar li.button',function(){
        //CHECK IF CURRENTLY OPEN
        if(!$(this).hasClass('pressed')){
            var form = this;
            setTimeout(function(){showForm(form)},210);
        }
    });

    //SHOW FORM
    function showForm(form){
        var str = $(form).attr('class').split(' ');
        var cl = str[0];
        var id = $(form).attr('id');
        var x = $(form).position().left;
        var y = $(form).position().top;
        x += 230;
        y += 50;
        $('.clear_overlay').show();
        $('body').css('overflow','hidden');
        $('.control_bar_form').load('_forms/'+cl+'.php',function(){
            $('.control_bar_form').find('.button_submit').attr('id',id);
            $('.control_bar_form').css({ "left": x, "top":y });
            $('.control_bar_form').slideToggle(200);
            $(form).addClass('pressed');
        });
    }
    function hideForm(){
        $('.clear_overlay').hide();
        $('body').css('overflow','auto');
        $('.control_bar_form').slideUp(200,function(){
            $('.control_bar li').removeClass('pressed');
            $('.control_bar_form').empty().css('width','auto');
            $('.control_bar_form :input[type="text"]').val('');
            $('.control_bar_form :input[type="checkbox"]').removeAttr('checked');
            $('.clear_overlay').hide();
        });
    }

Ответы [ 3 ]

0 голосов
/ 14 декабря 2011

Я нашел решение для этой ошибки. Изменение времени slideUp на 1 (то есть slideUp (1)) позволяет быстрее выполнить вызов .empty () и, таким образом, позволяет загружать новый контент.

Я все еще хотел бы лучшее решение, если это возможно. Но пока это работает.

0 голосов
/ 14 декабря 2011

Итак, проблема в том, что одна часть вашего скрипта недостаточно осведомлена о состоянии, в котором работает другая часть.Это означает, что вам нужно добавить некоторую переменную, объясняющую состояние, и убедиться, что переменная видна той части скрипта, которая должна проверять состояние.Нечто подобное

var isOpening = false;

, которое затем устанавливается в true в функции showForm () и возвращается в false в последнем обратном вызове.Функция hideForm () должна проверить значение этой переменной и просто вернуть, если оно истинно.

0 голосов
/ 14 декабря 2011

Вы подключаетесь к событию щелчка все неправильно.Вот как вы подключаетесь: 

$('.control_bar li.button').click(function(){
//Stuff here
});
...