모바일보기에서 nav을 사용할 때의 문제

내 모바일 환경에서 표시 및 숨기기를 클릭 할 수있는 아이콘이 표시되도록하려는 경우 지금 코드가 작동하지 않아 전혀 열리지 않습니다.모바일보기에서 nav을 사용할 때의 문제

내 문제 내가 뭘 잘못 확인, 누군가가 올바른 방향으로 날 지점 수없는 아이디의 여기

입력하십시오 알아 내기 위해 노력하고있다?

사전

감사이 내가

<nav class="navMenu"> 
<input id="menu-icon" type="checkbox"> 
<label id="menu-icon" class="iconMenuLbl" for="menu-icon"></label> 
<ul> 

    <li> 
     <a href=""><img class="navImg" src="media/Home-tall.png" alt=""></a> 
    </li> 
    <li> 
     <a href="summary"><img class="navImg" src="media/My-Details-tall.png" alt=""></a> 
    </li> 
    <li> 
     <a href="loans"><img class="navImg" src="media/My-Loans-tall.png" alt=""></a> 
    </li> 
    <li id="loggedin-box" class=""> 
     <form method="POST" action="login"> 
     <div> 
      <strong>some name</strong> 
     </div> 
     <button style="padding:0px;" name="logout" type="submit"> 
     <img class="navImg" src="media/Sign-Out.png"> 
     </button> 
     </form> 
    </li> 
</ul> 
</nav>

// JS 당신은 같은 이름을 공유하는 두 개의 ID를 가지고

$(function() { 
    var menuVisible = false; 
    $('#menu-icon').click(function() { 
    if (menuVisible) { 
     $('.navMenu').css({'display':'none'}); 
     menuVisible = false; 
     return; 
    } 
    $('.navMenu').css({'display':'block'}); 
    menuVisible = true; 
    }); 
    $('.navMenu').click(function() { 
    $(this).css({'display':'none'}); 
    menuVisible = false; 
    }); 
});

출처

2016-06-22 Ris

토글 체크 박스는 숨기기 위해 메뉴 바깥에 있어야합니다. 그래서 숨어서 클릭 할 무언가가 있습니다. 또한 중복 ID는 HTML에서 허용되지 않습니다. (두 개의 메뉴 아이콘 ID). [this] (https://jsfiddle.net/L5eLmn31/)과 같은 것이 작동해야합니다. (CSS 스타일이 없기 때문에 추한 것입니다.) – AWolf

정말 고마워요! – Ris

파일이 무엇 //. 'menu-icon'중 하나의 ID를 다른 이름으로 변경해보십시오. ID는 고유해야합니다. - 또한 입력 필드를 nav 태그 밖으로 이동하십시오.

출처

2016-06-22 16:16:19

모바일보기에서 nav을 사용할 때의 문제

답변

관련 문제