如何在按鈕中顯示/隱藏div

我使用jquery slide切換來顯示/隱藏div，當點擊bttn時。是否有可能把div放在按鈕中？（我需要這個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%; 
}

來源

2013-10-05 Igor Laszlo

你能澄清關於*按鈕*？按鈕頂部是否足夠？ –

你的HTML中沒有按鈕，你點擊一個DIV。你當然可以在另一個DIV中有一個DIV。 – Barmar

你說你想讓它們粘在頁面的頂部，所以我猜''div's可以用另一個'div'包裝，這樣就可以更容易地將它們作爲一個單元來控制 – GuiDocs

這是你在找什麼？
的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"); 
});

來源

2013-10-05 02:14:01

這正是我所尋找的，非常感謝！您可以在這裏看到它：http://igorlaszlo.com/mobile.html（您必須將瀏覽器窗口的大小調整爲最小320 x 480像素，因爲它適用於移動設備 - 小屏幕）。我想投你的答案，但我沒有足夠的聲譽去做... 有一件事情一直存在，我必須檢查粘性效果是否適用於手機或不:) –

如何在按鈕中顯示/隱藏div

回答

相關問題