Question

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

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

是否有人知道小部件或手风琴按钮（或其他按钮）的工作方式？

谢谢！

Answer 1

This fiddle应该让你入门。如果您担心IE7，请注意ie有一些问题。您可以通过一些条件样式来解决问题。

将其分解

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

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

手风琴就像按钮一样

1 个答案: