0

Как сделать, чтобы при нажатии на menu-button впервые, исполнялся код №1, а при втором и последующих нажатиях - код №2?

// № 1    —    подгружает меню

// когда пользователь кликнул по кнопке menu-button (показать меню), запрашиваем меню GET-запросом
$(".menu-button").click(function(e)
{
    $.get("index", "menu", serverResponse, "json");
    e.preventDefault();
});

function serverResponse(data)
{
    // если есть ошибки при выполнении запроса, выводим ошибки
    if (data.notice)
    {
        $(".notice-box").html(data.notice).show();
    }
    else
    {   
        $("#title, #content").slideUp(100);     // прячем контент, который был на странице до вызова меню
        $("#menu").html(data.menu).slideDown(600);  // показываем меню, которое запросили с помощью `menu-button`
    }
}

// № 2    —    этот код показывает либо контент либо меню с плавным переходом, меню при этом уже должно быть загружено (получено браузером) ранее

$(".menu-button")
    .blur(function()
    {
        $("#menu").slideUp(600);
        $("#title, #content").slideDown(100);
    })
    .click(function()
    {
        $("#menu").finish();
        if ($("#menu").is(":hidden"))
        {
            $("#title, #content").slideUp(100);
        }
        else
        {
            $("#title, #content").slideDown(100);
        }
        $("#menu").slideToggle(600); 
    });

#title и #content — это контент
#menu — это меню

В результате должно получиться так:
На странице, при ее загрузке, имеется контент.
При первом вызове меню (нажатие пользователем menu-button), меню подгружается запросом /index.php?menu после подгрузки меню, контент прячется, а меню при этом показывается.
При последующих вызовах меню (нажатие пользователем menu-button) должно выполняться все, что выше, только без подгрузки данных через GET-запрос /index.php?menu, то есть выводится либо контент либо меню с плавным переходом.

1
  • Пара глупых идей: 1) добавить счетчик. И при нажатии смотреть, если нажали 1 раз, то грузить контент, если он больше 1, не грузить...... 2) Результат get запроса должен положить в переменную. И Если она есть, не Null - то не грузить аякс 27 окт 2015 в 17:29

2 ответа 2

2

запишите в какую нибудь переменную ответ и проверяйте его на undefined вместо запроса, что-то вроде

if (typeof receivedData !== 'undefined') {
  serverResponse(data)
} else {
 $.get("index", "menu", serverResponse, "json");
}

если меню разное, то можно так:

if (typeof $(this).data('receivedData') !== 'undefined') {
  serverResponse(data)
} else {
 $.get("index", "menu", serverResponse, "json");
}

потом, там где меню показываем делаем

$(menuButton).data('receivedData', data);

но у вас меню одно, так что хватит переменной в вышестоящей области видимости.

1

Можно при вызове проверять на .is('.opened'); при первом вызове добавлять класс "opened", а при последующих - проверять на его(класса) наличие

$('.menu-button').click(function(e){
    if($(this).is('.opened')) {
        //Выполняем код №2
    } else {
        //Выполняем код №1
        $(this).addClass('opened');
    }
});
6
  • Это тот случай когда можно проверить есть ли на странице ID #menu. Можно как-то проверить присутствие на странице div id="menu"?
    – Plush
    28 окт 2015 в 7:34
  • 1
    $('div').is('#menu') 28 окт 2015 в 8:04
  • if($('div').is('#menu')) { //Выполняем код №2 } else { //Выполняем код №1 } — это будет аналогично вашему примеру?
    – Plush
    28 окт 2015 в 8:39
  • Да, вполне: $('div') - возвращает коллекцию div'ов, из которой .is('#menu') возвращает true или false по наличию или отсутствию div'a с указанным id соответственно. 28 окт 2015 в 8:48
  • 1
    обратную проверку можно получить добавив ! к исходному выражению - логическое отрицание. if (!$("div").is("#menu")) 28 окт 2015 в 11:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.