jquery - 手风琴式按钮

Question

jquery 比较新。我正在尝试制作一个像手风琴按钮一样的按钮......可以使用按钮并在其下方滑出一个 div，就像此页面上的主题选择器一样：http: //craigsworks.com/projects/qtip2/demos/ #themeroller（甚至不知道该怎么称呼它）。

最重要的部分是它滑出并且它位于页面内容的上方并且在滑出时不会改变 div 的高度。

有谁知道一个小部件或一种使用手风琴按钮（或其他按钮）来做到这一点的方法？

谢谢！

Answer 1

这个小提琴应该让你开始。如果您担心 IE7，请注意 ie 7 存在一些问题。您可以通过一些条件样式来解决问题。

打破它

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

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