Запретить запуск функций jQuery на определенной ширине экрана для системы меню / навигации

Question

Запретить запуск функций jQuery на определенной ширине экрана для системы меню / навигации

0

Я новичок в использовании jQuery и попытался закодировать базовую систему меню, которая при ширине экрана больше 480 пикселей работает путем наведения мыши на тег li для расширения подменю и шириной менее 480 пикселей, нажав на тег li, чтобы развернуть подменю.

Я попытался включить использование возможности Modernizr для обнаружения запросов к мультимедиа, однако, как вы увидите из моей попытки, он терпит неудачу:

Рабочий пример.... наведите курсор на тег li с именем "Свойства"

Проблема явно связана с тем, что код не выбирает размер экрана, поскольку он работает при> 480px и <480px, если вы обновите браузер с правильной шириной, но функции по-прежнему пытаются вызвать при изменении размера браузера!

Мой код:

// Main nav dropdown animation

$(document).ready(function() {
  function doneResizing() {
    if(Modernizr.mq('screen and (min-width: 481px)')) {

        $("#sub-menu").hide();

        $("#show-investment-type-nav").hover(function() {
            $(this).find("#sub-menu").stop(true, true).slideDown("fast");
        }, function() {
            $(this).find("#sub-menu").stop(true, true).fadeOut("fast");
        });

    }
    else if(Modernizr.mq('screen and (max-width: 480px)')) {

      $("#sub-menu").hide();

      var next_move = "show";

        $("#show-investment-type-nav").click(function() {

            $('#sub-menu').slideToggle(100);

            if (next_move === "show") {
                $("body").addClass("nav-active");
                $("#site-nav #icon").empty().html("&#59236;");
                $("#site-nav #nav-margin-down").animate({"margin-top": "163"}, 100);
                next_move = "hide";
            } else {
                $("body").removeClass("nav-active");
                $("#site-nav #icon").empty().html("&#59238;");
                $("#site-nav #nav-margin-down").animate({"margin-top": "0"}, 100);
                next_move = "show";
            }
        });
    }
  }

  var id;
  $(window).resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 0);
  });

  doneResizing();
});

Любая помощь в том, почему это происходит, было бы здорово, это поможет мне учиться!

Привет, ребята!

Sam Holguin 23 сен. 2013, в 17:27

Источник

Теги:

javascript

jquery

html

css

nav

2 ответа

Ещё вопросы

Sam Holguin · Answer 1 · 2013-09-23T15-20-00.000Z

Это, похоже, устраняет проблему, но может быть скорее взломом, чем исправлением!

var next_move = "show";

$(document).ready(function () {

  // Touch device fix to prevent submenu being shown during initial load
  $('#sub-menu').css("display","block");

    $("#show-investment-type-nav").click(function() {

      if (Modernizr.mq('screen and (max-width: 480px)')) {
        $('#sub-menu').slideToggle(100);
        if (next_move === "show") {
          $("body").addClass("nav-active");
          $("#site-nav #icon").empty().html("&#59236;");
          $("#site-nav #nav-margin-down").animate({"margin-top": "163"}, 100);
          next_move = "hide";
        } else {
          $("body").removeClass("nav-active");
          $("#site-nav #icon").empty().html("&#59238;");
          $("#site-nav #nav-margin-down").animate({"margin-top": "0"}, 100);
          next_move = "show";
        }
      }
    });

  function doneResizing() {
    if (Modernizr.mq('screen and (min-width: 481px)')) {

      // Hide submenu
      $("#sub-menu").hide();

      // Reset margin for li tags if screen expanded whilst nav open
      $("#site-nav #nav-margin-down").css("margin-top","0");

      $("#show-investment-type-nav").hover(function() {
          $(this).find("#sub-menu").stop(true, true).slideDown("fast");
      }, function () {
          $(this).find("#sub-menu").stop(true, true).fadeOut("fast");
      });
    } else if (Modernizr.mq('screen and (max-width: 480px)')) {

      // Fixes issue on touch device when you touch away from expanded submenu...this took forever!!!
      $('#sub-menu').slideUp(100);
      $("#site-nav #nav-margin-down").animate({"margin-top": "0"}, 100);

      // To make sure if nav expanded, so next_move ="hide", hover event doesn't hide() submenu
      if (!Modernizr.touch) {
        $("#show-investment-type-nav").hover(function() {
          $("#sub-menu").hide();
          if (next_move === "hide") {
            $("#sub-menu").show();
          }
        });
      }

      next_move = "show";
    }
  }

  var id;
  $(window).resize(function () {
    clearTimeout(id);
    id = setTimeout(doneResizing, 0);
  });

  doneResizing();
});

Jason P · Answer 2 · 2013-09-23T13-45-00.000Z

Попробуйте и посмотрите, работает ли это. Я переместил обработчик кликов из обработчика изменения размера. Связывание событий в событиях является сложным и, как правило, не является необходимым. Мне также пришлось переместить next_move чтобы поместить его в глобальную область. Добавление значения к элементу меню с использованием data() может быть лучшим вариантом:

var next_move = "show";

$(document).ready(function () {

    $("#show-investment-type-nav").click(function () {
        if (Modernizr.mq('screen and (max-width: 480px)')) {
            $('#sub-menu').slideToggle(100);
            if (next_move === "show") {
                $("body").addClass("nav-active");
                $("#site-nav #icon").empty().html("&#59236;");
                $("#site-nav #nav-margin-down").animate({
                    "margin-top": "163"
                }, 100);
                next_move = "hide";
            } else {
                $("body").removeClass("nav-active");
                $("#site-nav #icon").empty().html("&#59238;");
                $("#site-nav #nav-margin-down").animate({
                    "margin-top": "0"
                }, 100);
                next_move = "show";
            }
        }
    });

    function doneResizing() {
        if (Modernizr.mq('screen and (min-width: 481px)')) {
            $("#sub-menu").hide();
            $("#show-investment-type-nav").hover(function () {
                $(this).find("#sub-menu").stop(true, true).slideDown("fast");
            }, function () {
                $(this).find("#sub-menu").stop(true, true).fadeOut("fast");
            });
        } else if (Modernizr.mq('screen and (max-width: 480px)')) {
            $("#sub-menu").hide();  
            next_move = "show";
        }
    }

    var id;
    $(window).resize(function () {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });

    doneResizing();
});

novicecoder.co.uk/priestley .... плоды вашего труда. Это на шаг ближе ... но есть еще странная проблема с событием click для ширины <480px ?? Большое спасибо за это, я предполагаю, что это основные вещи :)
Кроме того, используя data (), вы просто имеете в виду изменение значения в зависимости от состояния события щелчка?
Написал мой грязный взлом выше, ура за вашу помощь !!