쇼와는 아이 HTML 태그는 내 코드 버튼을 클릭 이벤트

Question

에 따라 숨기기 :

지금 내 사이트에서 직원의 방문 로그인없이 내 홈 페이지는 다음 난에이를 표시 할 때

 <div id="templatemo_menu"> 
       <ul> 
        <li><a href="#" class="current">Home</a></li> 
        <li><a href="#">Login</a></li> 
        <!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>--> 
        <li><a href="#">About</a></li> 
        <li><a href="#" class="last">Contact Us</a></li> 
       </ul> 

       <ul> 
        <li><a href="#" class="current">Home</a></li> 
        <li><a href="#">Profile</a></li> 
        <!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>--> 
        <li><a href="#">Leave</a></li> 
        <li><a href="#">Complaint</a></li> 
        <li><a href="#" class="last">Resignation</a></li> 
       </ul> 
     </div> 
    </div> 

내 메뉴 모음 :

<ul> 
        <li><a href="#" class="current">Home</a></li> 
        <li><a href="#">Profile</a></li> 
        <!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>--> 
        <li><a href="#">Leave</a></li> 
        <li><a href="#">Complaint</a></li> 
        <li><a href="#" class="last">Resignation</a></li> 
       </ul> 

:

  <ul> 
        <li><a href="#" class="current">Home</a></li> 
        <li><a href="#">Login</a></li> 
        <!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>--> 
        <li><a href="#">About</a></li> 
        <li><a href="#" class="last">Contact Us</a></li> 
       </ul> 

그리고 난 내 메뉴 표시 줄에서이 문제를 숨기려

하지만 내 사이트에 직원 로그인 후 난 내 버튼 클릭 이벤트에 내 메뉴 표시 줄에 표시 할 때

<ul> 
        <li><a href="#" class="current">Home</a></li> 
        <li><a href="#">Profile</a></li> 
        <!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>--> 
        <li><a href="#">Leave</a></li> 
        <li><a href="#">Complaint</a></li> 
        <li><a href="#" class="last">Resignation</a></li> 
       </ul> 

내가 버튼을 클릭 이벤트에 대한 내 메뉴 표시 줄에서이 문제를 숨기려 :

• 홈
• 로그인
템플릿 </A> </리> ->
• 소개
• 문의

어느 방법으로 나에게 제안 할 수 있습니까 ???

Answer 1

다음 솔루션은 로그인에 클릭 후입니다 :

document.querySelector('#templatemo_menu ul:nth-child(1)').style.display='none'; 
document.querySelector('#templatemo_menu ul:nth-child(2)').style.display='block'; 

및 로그인없이 게스트 사용자는

document.querySelector('#templatemo_menu ul:nth-child(2)').style.display='none'; 
document.querySelector('#templatemo_menu ul:nth-child(1)').style.display='block'; 

참고로 갈 경우 :을하지만 당신은 갈 수도 있습니다 사용자가 페이지를 새로 고칠 때 JavaScript가 작동하지 않으므로 세션 또는 쿠키를 확인하기위한 서버 측 솔루션.

Answer 2

간단한 해결책은 jQuery의 $ .click() 메소드를 사용하여 관련 태그를 클릭 한 시점을 감지 한 다음 메뉴를 표시하는 스타일을 적용하는 것입니다. 또는 jQuery의 $ .toggle을 사용하여 교대 클릭 이벤트를 기반으로 메뉴를 숨기고 표시하고 동일한 스타일을 적용 및 제거 할 수 있습니다.

JSFiddle과 같은 사이트에 사이트를 배치 할 수 있다면 마크 업이 나타내는 내용과 도움이되는 정보를 훨씬 더 간단하게 볼 수 있습니다. 행운을 빌어 요! 자바 스크립트를 사용하여 선호하는 경우