Отзывчивая кнопка с использованием jquery и css

Question

У меня есть div с заголовком, и у меня есть меню вертикальной навигации в том же div. Чтобы сделать его отзывчивым, я использую медиа-запрос и «Дисплей: нет и позиция: abolute» для навигационного контейнера. он отлично работает до этого шага.

ТЕПЕРЬ, что я хочу, это. когда я нажимаю этот заголовок, появляется меню навигации, и когда я нажимаю ссылку в меню навигации, исчезает означает, что само меню становится «Дисплей: нет»

Для этого я использовал .toggle() jquery. если это работает отлично.

, но проблема в том, что я хочу, чтобы эта функция .toggle() не работала, когда ширина окна больше 980 пикселей;

<h2 id="heading"><span>Office<span class="blue">Managnment</span></span></h2> 

<ul id="list"> 
    <li><a href="#p">P</a></li> 
    <li><a href="#a">A</a></li> 
    <li><a href="#n">N</a></li> 
    <li><a href="#lb">L</a></li> 
    <li><a href="#a">A</a></li> 
    <li><a href="#r">R</a></li> 
    <li><a href="#p">P</a></li> 
</ul> 

и Javascript

$(function() { 
    $("#heading").click(function() { 
     $("#list").toggle(); 
    }); 
    $("#list").click(function() { 
     $("#list").toggle('hide'); 
    }); 
}); 

да и я попытался, если заявление, чтобы выполнить этот код, только если ширина меньше 980px, но проблема в том, что он проверяет только для ширины при загрузке страницы. то есть если окно меньше 980 при загрузке. скрипт работает отлично. но когда окно больше 980 при загрузке, скрипт не работает даже при изменении размера его до менее 980 пикселей.

Я не понимаю, как этого достичь. главным образом, проблема при выборе условия для оператора if else.

1. нагрузки окно и проверьте, ширина

   • если меньше, то 980px выполнить сценарий
   • , если это более 980 не выполнить сценарий.

2. на изменении размера окна проверить новую ширину

   • , если это было более 980 ранее

     • проверить, если ширина увеличена. если он увеличен, ничего не делать (скрипт не должен работать)
     • проверить, если ширина теперь меньше 980. НАЧАТЬ Сценарий. Сценарий должен работать сейчас.

   • если было меньше, чем 980 ранее.

     • проверить, если ширина увеличена более 980. если она увеличена ОСТАНОВИТЕ сценарий. не должно работать сейчас
     • проверить, если ширина теперь меньше, чем 980. Ничего не делать. Теперь скрипт должен работать.

В свою очередь SHORT на функцию переключения, когда ширина меньше 980px.и выключите переключатель и установите для отображения, когда ширина больше 980 пикселей.

Я понял, как показано ниже. Это работает, но иногда, когда я изменяю размер медленно, это ведет себя странно.

  var $window = $(window), 
       ONLOADtoggleEnabled = false, 
       smallscreenbefore = false; 

      $window.on('resize', function() { 

       if (smallscreenbefore == false && $window.width() > 1220) { 


       } else if(smallscreenbefore == false && $window.width() < 1220) { 

        $("#Tablist").hide(400); 
        $("#heading").click(function() { 
                   $("#Tablist").toggle(400);      
          }); 
          $("#Tablist").click(function() { 
                   $("#Tablist").toggle(400);      
          }); 
          smallscreenbefore = true; 

       } 
       else if(smallscreenbefore == true && $window.width() > 1220) { 

         $("#heading").unbind('click'); 
          $("#Tablist").unbind('click'); 
          $("#Tablist").show(400); 
          smallscreenbefore = false; 

       } 
       else if(smallscreenbefore == true && $window.width() < 1220) { 

          smallscreenbefore = false; 

       } 
      }); 




      var $window = $(window); 
      $window.on('load', function() { 

       if ($window.width() < 1220) { 

          $("#heading").click(function() { 
                   $("#Tablist").toggle(400);      
          }); 
          $("#Tablist").click(function() { 
                   $("#Tablist").toggle(400);      
          }); 

          smallscreenbefore = true; 

       } 
       else if($window.width() > 1220) { 

        smallscreenbefore = false; 
       } 
      }); 

Answer 1

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

var MAX_WIDTH = 980, 
    $window = $(window), 
    toggleEnabled = false; 

$window.on('resize', function() { 
    // Check window width and check if toggle isn't already enabled 
    if ($window.width() < MAX_WIDTH) { 
     // Check if toggle isn't enabled yet 
     if (!toggleEnabled) { 
      // Use on() to add eventListener 
      $("#heading").on('click', function() { 
       $("#list").toggle(); 
      }); 
      $("#list").on('click', function() { 
       $("#list").toggle('hide'); 
      }); 

      toggleEnabled = true; 
     } 
    } else if (toggleEnabled) { 
     // Use off() to remove eventListener 
     $("#heading").off('click'); 
     $("#list").off('click'); 

     // Show the list 
     $('#list').show(); 

     toggleEnabled = false; 
    } 

    $('#output').text('Width: ' + $window.width() + ', toggleEnabled: ' + toggleEnabled); 
}); 

// You can trigger the resize event at the start to set the initial state of the menu 
$window.trigger('resize'); 

Рабочей версию со списком: http://jsfiddle.net/srm6p/3/