미디어 쿼리의 자바 스크립트 무시

Question

나는 반응 형 사이트를 만들고 있습니다. 나는 화면의 너비가 768 px (클래스 "hiddenClass"라고 부름) 이하로 떨어지면 숨겨 지도록 미디어 쿼리를 설정했습니다. 그런 다음 Javascript를 구현하여 버튼 클릭시이 클래스를보기로 전환합니다. 내가 겪고있는 문제는 자바 스크립트가 미디어 쿼리를 무시하는 것 같습니다. 따라서 768px 이하의 화면을 축소하면 "hiddenClass"가 사라지고 ... "hiddenClass"가 표시된 버튼을 클릭 한 다음 다시 작은 장치에 숨기려면 버튼을 한 번 더 클릭하십시오. .. 이제 창을 확장하고 "hiddenClass"가 768px에 도착한 후에도 숨겨져 있습니다. 내가 자바 스크립트를 꺼내 창을 축소하면 "hiddenClass"가 다음과 같이 수행해야합니다 ... 자바 스크립트가이를 무시하고 있다고 알려줍니다.

CSS 수정 사항이 있습니까? 나는 그것이 항상 768px에 도달 한 후에 숨겨진 클래스를 표시하기 위해 자바 스크립트에서 윈도우 크기 조정 이벤트를 검사 할 수 있다는 것을 알고있다. 이것이 CSS로 처리 될 수 있는지 궁금 해서요 .... 아니면 자바 스크립트가 그것을 고칠 수있는 방법인지 궁금합니다.

업데이트 JS JSfiddle이 주석 처리되었으므로 작동 방식을 확인할 수 있습니다. JS를 추가하여 위에서 설명한 문제를 확인하십시오. 버튼은 "hiddenClass는"리튬의에서 "메뉴"클래스가 될 것이다 아래로 화면을 축소하고 '메뉴의'탐색 요소 :

http://jsfiddle.net/or5vy17L/1/

HTML :

<ul> 
     <li class="menuButton">- Menu -</li> 
     <a href="index.html"> 
      <li class="menu" > 
       Home 
      </li> 
     </a> 
     <a href="instagram.html"> 
      <li class="menu" > 
       Instagram 
      </li> 
     </a>  
     <li class="menu">Clients</li> 
     <li class="menu">Nutrition</li> 
     <li class="menu">About Me</li> 
     <li class="menu">Contact</li> 
    </ul> 

CSS :

li { 
display:inline; 
color:$font-color--nav; 
cursor:pointer; 
font-size:1.5em; 
padding: .7em .7em .7em .7em; 
//for space between margins 
margin-right:-4px; 
border-radius:.5em; 
} 

ul { 
    text-align:center; 
} 

.menuButton { 
    display:none; 
} 


@media (max-width:768px) { 
    ul { 
     padding:0px; 
    } 

    li { 
     display:list-item; 
     border:1px solid white; 
     padding:.2em .2em .2em .2em; 
     border-radius:0px; 
    } 

    .menu { 
     display:none; 
    } 

    .menuButton { 
     display:list-item; 
    } 
} 

자바 스크립트 :

/**** 
$('ul').on('click', '.menuButton', function() { 
    $('.menu').slideToggle(); 
}); 
****/ 

Answer 1

.hiddenclass은 인라인 스타일이므로 인라인 스타일이 거의 모든 다른 스타일보다 우선합니다.

• 인터넷 익스플로러 8 :

  <div style="background: red;"> 
      The inline styles for this div should make it red. 
  </div> 
  div[style] { 
      background: yellow !important; 
  } 
  

  ^{JSFiddle Demo}
  According to this article은이 CSS의 솔루션은 작동합니다 당신은 두 가지 옵션이 있습니다 this CSS Tricks post에 설명 된대로, 하나는 CSS와 인라인 스타일을 무시하는 것입니다 .화면 크기를 조정할 때 0

• 모질라 파이어 폭스 2와 3
• 오페라 9
• 애플 사파리, 그리고
• 구글 크롬

또는 인라인 스타일을 제거 JS 또는 JQuery와 사용

$(window).resize(function(){ 
if($(this).width() >= 768){ 
$('.hiddenclass').show(); 
} 
else{ 
$('.hiddenclass').hide(); 
} 
}); 

^{JSFiddle Demo}

내가 보인다

Answer 2

이 문제를 통해 자신을 온하고 여기에 조언 다음,이 솔루션을 마련했습니다

window.onresize = function() { 
    var menu = document.getElementById('nav').getElementsByTagName('ul')[0]; 

    if(window.innerWidth >= 1024) menu.style.display = ''; 
}; 

function toggleMenu() { 
    var menu = document.getElementById('nav').getElementsByTagName('ul')[0]; 
    var link = document.getElementById('nav').getElementsByTagName('a')[0]; 

    if(menu.style.display == 'block') { 
      menu.style.display = 'none'; 
      link.innerHTML = '▼'; 
     }else{ 
      menu.style.display = 'block'; 
      link.innerHTML = '▲'; 
    } 
} 

설명 : 기능은 메뉴의 표시/숨기기를 제어 toggleMenu() 1024px (드롭 다운 스타일 메뉴)에서 1024px로 창 크기를 조정 한 후 문제가 발생하여 정상적인 "데스크톱"메뉴가 완전히 사라졌습니다. 자바 스크립트가 인라인 스타일 (즉, 요소 ​​속성)을 삽입하고 크기가 1024 이상인 경우이 인라인 스타일은 없어야합니다.

문제가 해결되었습니다.