jquery와 css를 사용하는 반응 버튼

Question

제목이있는 div가 있고 동일한 div에 수직 탐색 메뉴가 있습니다. 응답 성을 높이기 위해 미디어 쿼리를 사용하고 탐색 컨테이너에는 "표시 : 없음 및 위치 : 취소"를 사용합니다. 이 단계까지 완벽하게 작동합니다.

지금 내가 원하는 것은 그 것이다. 이 제목을 클릭하면 탐색 메뉴가 나타나고 탐색 메뉴의 링크를 클릭하면 메뉴 자체가 "표시 : 없음"이됩니다.

이렇게하려면 .toggle() jquery를 사용했습니다. 언제 제대로 작동합니다.

하지만 문제는이 .toggle() 함수가 윈도우의 너비가 980px 이상일 때 작동하지 않기를 바라는 것입니다.

<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> 

및 자바 스크립트

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

와 폭 미만 980 픽셀이지만, 문제는 그것이 단지 폭 페이지로드를 확인하는 것이 경우에만 문이 코드를 실행하는 경우 그래, 난 노력했다. 즉 윈도우가 980보다 작 으면 스크립트가 잘 작동합니다. 그러나 윈도우가 980 이상이되면 스크립트는 980px 이하로 크기를 재조정해도 작동하지 않습니다.

나는 이것을 달성하는 방법을 모르겠다. 주로 if else 문에 대한 조건을 선택할 때 주로 발생하는 문제입니다. 그것은 스크립트를 실행하지 않는 이상 980 다음 경우 스크립트를

을 실행 980 픽셀 다음 작은 경우

1. 부하 창 및 폭을

   • 을 확인합니다. 폭이 증가하는 경우 이전에
     • 체크 더 다음 980 인 경우 창의 크기 조정에

   • 새로운 폭

     • 을 확인합니다. 증가한 경우 아무 것도하지 않습니다 (스크립트가 작동하지 않아야합니다)

     • 폭이 980보다 작은 지 확인하십시오. 스크립트를 시작하십시오. 스크립트가 작동합니다.

   • 이전에 980보다 작 으면.

     • 너비가 980 이상으로 증가했는지 확인하십시오. 증가 된 경우 스크립트를 중지하십시오. 이제는 작동하지 않아야합니다.
     • 너비가 이제 980보다 작은 지 확인하십시오. 아무것도하지 마세요. 스크립트가 작동해야합니다. 토글 기능에 SHORT 차례로

때 다음 980 픽셀 폭 이하이다.전환을 해제하고 너비가 980px 이상이 될 때 표시하도록 설정합니다.

다음과 같이 알아 냈습니다. 그것은 작동하지만 때로는 내가 천천히 그것을 이상하게 행동 크기를 조정할 때.

  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/