手风琴喜欢按钮

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 */ 
}); 

注意：这只是为了让你开始。您可能需要连接更多的事件处理程序，以便根据您的需要单击链接上的按钮。