0

jqueryは比較的新しいです。私はアコーディオンボタンのようなボタンを作ろうとしています...ボタンを取り、このページのテーマセレクターのようにその下にdivをスライドさせる何か: http://craigsworks.com/projects/qtip2/demos/ #themeroller (何と呼べばいいのかさえわかりません)。

大きな部分は、スライドアウトすることと、ページのコンテンツの上にあり、スライドアウトしても div の高さが変わらないことです。

これを行うためにウィジェットまたはアコーディオンボタン（または他のボタン）を操作する方法を知っている人はいますか?

ありがとう！

4

1 に答える 1

0

このフィドルで始められるはずです。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 */
});

注:これは、開始するためのものです。必要に応じて、リンク上のボタンをクリックするために、さらにイベント ハンドラーを接続する必要がある場合があります。

于 2012-08-07T04:34:26.607 に答える