작은 너비로 jQuery 함수를 실행하는 방법은 무엇입니까?

화면의 너비가 좁은 곳에서 뭔가하고 싶습니다.하지만 문제가 있습니다. 나는 반응 형 네비게이션을 만들고 있는데, 작은 너비의 버튼을 표시하려고합니다. & 메뉴를 토글합니다. 그러나 Menu를 더 작은 너비로 숨기면 jQuery에서 숨김으로 인해 더 넓은 너비로 메뉴가 표시되지 않습니다 ...작은 너비로 jQuery 함수를 실행하는 방법은 무엇입니까?

그래서 jQuery 코드를 더 작은 너비로 그냥 만들고 싶었습니다. 작동하지 않습니다 :

$(window).resize(function() { 
    if($(window).width() < '48em') { 
     $('.ji-toggle-btn').click(function() { 
      $(this).parent().find('ul').toggle(); 
     });     
    } 
});

출처

2016-07-28 Ali Bahaari

@media 쿼리 또는 부트 스트랩을 사용하십시오. – Vishal

내 질문을받지 못했다고 생각합니다 ...;) –

예, 질문이 있습니다. 메뉴 항목 대신 버튼을 코딩하면 작은 화면에서 볼 수 있습니다. 그러나 더 큰 화면에서도 버튼이 나타났습니다. 대신 큰 화면에 메뉴 항목을 표시하려고합니다. 내가 맞습니까? – Vishal

버튼에 CSS의 미디어 쿼리 함께 숨기기/표시하는 적절한 방법 :

.css 예 :

.ji-toggle-btn { 
    display: none; 
}  

@media (min-width: 48em) { 
    .ji-toggle-btn { 
    display: block; 
    } 
}

.scss 예 :

.ji-toggle-btn { 
    display: none; 

    @media (min-width: 48em) { 
    display: block; 
    } 
}

반응 형 사이드 바를 수행하는 방법의 샘플을 조롱했습니다. http://codepen.io/staypuftman/pen/dGOMYO

이 예에서 주목할 것은 JS가 얼마나 적은지입니다. .toggle 클래스를 타겟팅하고 CSS 전환을 사용하면 원하는 곳으로 이동할 수 있습니다. JS로이 접근 방식을 생각해보십시오.

출처

2016-07-28 21:07:39 staypuftman

나는 내 질문도받지 못했다고 생각합니다 ...;) –

내가 링크 된 예를 확인하십시오 - 당신이 가야 할 곳으로 당신을 데려 갈 것이라고 생각합니다. JS를 많이 필요로하지 않습니다. 대신 수업을 토글하는 것에 대해 생각해보십시오. – staypuftman

네, 정확히 내가 원하는 ... ..., 고마워요. –

$ (창). 폭()은 int (화면 폭 (픽셀))를 반환합니다. em에서 그 가치를 얻으려면 그 body의 font-size를 나누어서 '48em'이 아니라 '48'과 비교해야합니다. 예를 들면 :

$(window).resize(function() { 
    if(($(window).width()/parseFloat($("body").css("font-size"))) < 48) { 
     // Do stuff here...    
    } 
});

출처

2016-07-28 21:07:22 Pat

팻이 작동하지 않습니다 ... –

http://codepen.io/anon/pen/vKaYNB이게 당신이 성취하려고하는 것입니까? – Pat

테스트에서 정확히 내 문제는 ..., 화면을 작게 만들고 버튼을 클릭하여 탐색 바를 숨긴 다음 화면을 넓게 만듭니다. 그러면 탐색 바가 표시되지 않습니다 ... 이것은 내가 원하는 것입니다. –

문제는 작은 해상도로 동작을 할당하는 것입니다. 창 크기가 48 em보다 작은 경우에만 클릭 이벤트를 할당하려고합니다.

$(window).resize(function() { 
    if($(window).width() < '48em') { 
     $('.ji-toggle-btn').parent().find('ul').toggle(); 
    } 
});

편집 나는 CSS에 대한 위의 사람에 동의 : - 간단한 단어와

그냥 클릭 이벤트를 제거합니다. 이러한 것들은 기본적으로 미디어 쿼리로 수행되어야합니다.

출처

2016-07-28 21:31:27

작은 너비로 jQuery 함수를 실행하는 방법은 무엇입니까?

답변

관련 문제