2013-10-05 4 views
0

jquery 슬라이드 토글을 사용하면 bttn을 클릭 할 때 div 표시/숨기기를 할 수 있습니다. div를 배치 할 수 있습니까? 는 (I 모바일 장치에있는 페이지의 상단에 제대로 탐색을 부착 할 수 beeing는이 필요합니다.)버튼에서 div 표시/숨기기 방법

html로

<div class="medianavbttn">Show Menu</div> 

<div class="medianav"> 
    <ul id="medianav-links"> 
     <li class="current"><a href="#section1">About</a></li> 
     <li><a href="#section2">Gallery Photos</a></li> 
     <li><a href="#section3">Contact</a></li> 
    </ul> 
</div> 

스크립트가

<script> 
$(".medianavbttn").on("click", function(){ 
    $(".medianav").slideToggle("slow"); 
    $(this).text($(this).text() == "Show Menu" ? "Hide Menu" : "Show Menu"); 
}); 
</script> 

CSS의

.medianavbttn { 
position: relative; 
display:block; 
width: 100%; 
height: 30px; 
top: 0; 
left: 0; 
cursor: pointer; 
} 

.medianav { 
position: relative; 
display: none; 
width: 100%; 
} 
+0

가 버튼에서 * *에 대해 명확히 수 있을까? 버튼 상단에 충분합니까? –

+1

HTML에 단추가 없으므로 DIV를 클릭하십시오. 당신은 확실히 다른 DIV 안에 하나의 DIV를 가질 수 있습니다. – Barmar

+0

당신은 이것들을 페이지 상단에 붙이고 싶기 때문에'div's를 다른 div로 감싸서 하나의 단위로 컨트롤하는 것이 더 쉽다고 생각합니다. – GuiDocs

답변

0

이게 당신이 원하는 것입니까?
JsFiddle : http://jsfiddle.net/GGtkc/
HTML :

<div class="medianavbttn"> 
    <span class="showbutton">Show Menu</span> 

<div class="medianav"> 
    <ul id="medianav-links"> 
     <li class="current"><a href="#section1">About</a></li> 
     <li><a href="#section2">Gallery Photos</a></li> 
     <li><a href="#section3">Contact</a></li> 
    </ul> 
</div> 
</div> 

JS :

$(".medianavbttn").on("click", function(){ 
    $(".medianav").slideToggle("slow"); 
    $(this).find('.showbutton').text($(this).find('.showbutton').text() == "Show Menu" ? "Hide Menu" : "Show Menu"); 
}); 
+0

이것은 내가 찾던 바로 그 것이다. 고마워! http://igorlaszlo.com/mobile.html에서 볼 수 있습니다 (모바일 장치 - 작은 화면의 경우와 마찬가지로 브라우저 창을 최소 320x480 픽셀로 조정해야 함). 나는 당신의 대답을 투표하고 싶었지만 그것을하기에 충분한 명성을 얻지 못했습니다 ... 끈적 끈적한 효과가 휴대 전화에서 작동하는지 한 가지를 확인해야합니다 :) –