手風琴喜歡按鈕

Question

比較新的jquery。我正在試着製作一個像手風琴按鈕一樣的按鈕......這個按鈕就像是這個頁面上的主題選擇器一樣滑出一個div下面的div：http://craigsworks.com/projects/qtip2/demos/#themeroller（甚至不知道該怎麼稱呼它）。

大部分是它滑出並且它位於頁面上的內容之上，並且在滑出時不會改變div的高度。

有沒有人知道一個小工具或一種方法來操作手風琴按鈕（或其他按鈕）來做到這一點？

謝謝！

Answer 1

This fiddle應該讓你開始。如果你擔心IE7，請注意ie7有一些問題。您可以通過一些條件樣式來解決問題。

打破它

HTML

<div class="multiButton"> 
    <input class="main" type="button" Value="Set Up"/><input type="button" class="Selector" value="^"/> 
    <ul class="options"> 
     <li><a href="linka.html">Set Up</a></li> 
     <li><a href="linkb.html">Update</a></li> 
    </ul> 
</div> 
<div>Some more content</div> 

CSS

/*This is the "Slider"*/ 
.multiButton ul 
{ 
    display:none; 
    border: solid 1px black; 
    width:75px; 
    position: absolute; 
    background-color:#FFF; 
} 


/*Main Part of the button*/  
.multiButton .main 
{ 
    border: solid 1px black; 
    width:60px; 
} 


/*Slider "trigger"*/ 
.multiButton .Selector 
{ 
    border: solid 1px black; 
    border-left:none; 
    width:15px; 
} 


/*The Whole "Button"*/ 
.multiButton { position: relative;} 

的Javascript

/* Trigger the dropdown */  
$(".multiButton .Selector").click(function(){ 
    $(".multiButton ul").slideToggle(); 
}); 


/* Slide up the drop down if the mouse leaves the button */ 
$(".multiButton").mouseleave(function() { 
    $(this).children("ul").slideUp(); 
}); 

/* Change the button text and slide the dropdown up on link click */ 
$(".multiButton a").click(function(){ 
    $(this).closest(".multiButton").children(".main").val($(this).text()); 
    $(this).closest(".options").hide(); 
    return false; /* Remove this line if you want to use the links in the drop down */ 
}); 

注意：這只是爲了讓你開始。您可能需要連接更多的事件處理程序，以便根據您的需要單擊鏈接上的按鈕。