2013-10-05 6 views
0

Я использую jquery slide toggle, чтобы показать/скрыть div, когда bttn нажал. Можно ли поместить div в КНОПКУ? (мне это нужно для неоспоримым в состоянии придерживаться навигации должным образом в верхней части страницы, которая предназначена для мобильных устройств.)Как показать/скрыть 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' можно обернуть в другой '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 (вы должны изменить размер окна браузера до минимального размера 320 x 480 пикселей, как и для мобильных устройств - небольшие экраны). Я хотел проголосовать за ваш ответ, но у меня нет достаточной репутации, чтобы сделать это ... Осталось только одно: я должен проверить, работает ли липкий эффект на мобильных телефонах или нет :) –

Смежные вопросы