Responsve 디자인이 응답하지 않습니다.

반응이 빠른 디자인에 익숙하며 미디어 쿼리를 사용하려고합니다. 미디어 쿼리를 사용하여 내비게이션 막대를 반응 적으로 만들려고합니다. 문제는 모바일보기에서 페이지 크기를 조정할 때 탐색 모음에 SPAN 태그가 표시되지만 클릭하면 메뉴 목록이 드롭 다운됩니다. jQuery를이 프로세스에 사용하려고했습니다. 내 코드는 다음과 같습니다 :Responsve 디자인이 응답하지 않습니다.

HTML 코드

<span class="menu-trigger">MENU </span> 
<nav class = "nav-main">   
    <ul> 
    <li> 
     <a href = "#" class = "nav-item"> HOME</a>        
    </li> 
    <li> 
     <a href = "#" class = "nav-item">ABOUT US </a> 
    </li> 
    <li> 
     <a href = "#" class = "nav-item">PORTFOLIO </a> 
    </li> 
    <li> 
     <a href = "#" class = "nav-item">SERVICES </a> 
    </li> 
    <li> 
     <a href = "#" class = "nav-item">CONTACT US </a> 
    </li> 
    </ul> 
</nav>

CSS 코드

.nav-main { 
    width:100%; 
    background-color: #222; 
    height:70px; 
    color:#fff; 
} 

@media screen and (max-width: 480px){  
    .menu-trigger{ 
     display:block; 
    }  
    .nav-main > ul > li{ 
     float:none; 
     border-bottom: 2px solid #d5dce4 
    } 
    .nav-main { 
     display:none; 
    }  
    .nav-main > ul > li:last-child{ 
     border-bottom: none; 
    }   
}

jQuery 코드

<script type ="text/javascript"> 
    jQuery(".menu-trigger").click(function(){ 
     jQuery(".nav-main").slideToggle(); 
    }); 
</script>

리 이제는 모바일 크기로 갈 때 콘텐츠 nav-main이 사라지고 SPAN 만 표시되지만 SPAN을 클릭하면 navbar의 나머지 목록을 표시하는 토글 효과가 있지만 아무 일도 일어나지 않는 것으로 간주됩니다.

UPDATE --- JSFIDDLE - https://jsfiddle.net/k4ytvyef/

출처

2016-06-04 Bucky Thomas

죄송합니다. https://jsfiddle.net/k4ytvyef/ https://jsfiddle.net/k4ytvyef/의 악의적 인 heres를 보시면 메뉴 탐색이 사라지고 SPAN을 클릭 할 때 메뉴 항목이 이동하는 것을 알 수 있습니다. –

스크립트의 위치를 보지 않고는, 난 단지 당신이 당신의 HTML 요소 위의 jQuery 코드를 배치했을 수 있다고 가정 할 수 있습니다.

jsbin에서이 작업을 시도하면 jquery 선택기가로드 된 후 요소를 찾을 수있을 때 코드가 작동합니다.

는 페이지 하단에 코드를 이동하지 않고이를 달성하기 위해, 당신과 같이 jQuery의 ready 이벤트와 스크립트를 포장 할 수 있습니다

jQuery(document).ready(function() { 
    jQuery(".menu-trigger").click(function(){ 
     jQuery(".nav-main").slideToggle(); 

    }); 
});

편집 : 댓글에

그것을 왜 묻는 위 jsfiddle에서 작동하지 않습니다.

JQuery는 네이티브 javascript가 아닙니다. 테스트 환경에서이 작업을 수행하려면 코드와 함께 실행할 수 있도록 jquery 라이브러리를 추가해야합니다.

출처

2016-06-04 23:11:55 Bapple

https://jsfiddle.net/k4ytvyef/2/ –

Responsve 디자인이 응답하지 않습니다.

답변

관련 문제