div를 클릭하면 팝업 메뉴가 나타나게하는 방법

Question

휴대 전화와 같이 화면이 작을 때 호버 메뉴 버튼을 만드는 사이트에서 작업하고 있습니다.

호버 메뉴 버튼과 메뉴에 대한 내 html 코드는 아래에 나와 있습니다. mnav-button lt768 클래스는 버튼이 표시되는 곳이며 mobile-nav-wrap lt768 클래스에는 메뉴가 있습니다.

내 문제는 내가 사이트

http://whiteboard.is/

에서이 예제를 가지고 있다는 것입니다 그들은 팝업 메뉴를 표시 얼마나 나는 아무 생각이 없을 때 클래스 mnav-button lt768 내에서 사용자가 클릭.

div 클래스 내에서 일부 클릭이 발생할 때 메뉴를 표시하려면 어떻게해야합니까? mnav-button lt768. 사용자가 사업부 여기 <div class="close-btn"></div>

를 클릭 할 때

참고 또한 메뉴가 닫히고있는 HTML,

<div class="mnav-button lt768"></div> 
    <div class="mobile-nav-wrap lt768"> 
     <nav class="mobile-nav"> 
      <div class="close-btn"></div> 
      <a href="#" class="home"> 
       <span>Home</span> 
      </a> 
      <a href="#"> 
       <span>Company</span> 
      </a> 
      <a href="#"> 
       <span>Work</span> 
      </a> 
      <a href="#"> 
       <span>Space</span> 
      </a> 
     </nav> 
    </div> 

그래서이 여전히 모두가 액세스 할 수 있도록 내가 사이트를 업로드 작동하지 않습니다 여기 kewsplus.com/testing

Answer 1

원하는 효과가 있습니까? DEMO

HTML :

<div id="header"> 
<button class="main-nav">push me</button> 
</div> 
<div id="content"> 
<div class="media-content"> 
</div> 
<div class="mobile-nav"> 
    <button class="close" value="close">close</button> 
    <ul> 
     <li>item1</li> 
     <li>item1</li> 
     <li>item1</li> 
    </ul> 
</div> 

JS는 :

$(document).ready(
function() { 
    $("button.main-nav").click(function() { 
     $(".mobile-nav").fadeIn(1000); 
    }); 
    $("button.close").click(function() { 
     $(".mobile-nav").fadeOut(1000); 
    }); 
}); 

Answer 2

는 http://whiteboard.is에, 우리는의 클릭 (또는 터치)을 감지하는 jQuery를 맛 자바 스크립트의 간단한 조각을 사용 모바일 탐색 버튼을 클릭하고 해당 이벤트를 사용하여 본문에서 클래스를 추가/제거합니다. 그런 다음 CSS에서이 클래스 변경을 사용하여 모바일 탐색을 숨기거나 표시합니다.

자바 스크립트 :

// We're going to use the "touchstart" event since we're aiming this as touch devices, not desktop devices 
$('body').on('touchstart','.mnav-btn',function(event){ 
    // let's prevent the default action 
    event.preventDefault(); 

    // trigger the class change 
    $('body').addClass('mnav-open'); 
}); 

// then, the close button 
$('.mnav').on('touchstart','.close-btn',function(event){ 
    event.preventDefault(); 
    $('body').removeClass('mnav-open'); 
}); 

// OR -- if you don't want your site to require the close button, and the nav button will always be present, you can use this instead 
$('body').on('touchstart','.mnav-btn',function(event){ 
    event.preventDefault(); 
    // Will add the class if it doesn't exist, and remove it if it does 
    $('body').toggleClass('mnav-open'); 
}); 

기본 스타일 : 그것을해야

.mnav { 
    // put design styles here 
    display:none; // keeps the nav hidden until the class .mnav-open is added to body 
} 

.mnav-open .mnav { 
    display:block; 
} 

.