0

私は引き出しメニューを持ついくつかのボタンを持っています。私がやりたいことは、ユーザーがボタンの上にカーソルを置いたときに引き出しがわずかに突き出るように状態を追加することです (おそらく少し小刻み/ラバーバンディングで)より多くの情報が入った引き出しがあることを確認してください。

スライドが機能し、ホバー機能が設定されていますが、部分的なslideDownを実装する方法がわかりません。

何か案は？

フィドル。

コード：

<div class="clause">
    <div class="icon"><img src="http://i.imgur.com/rTu40.png"/></div>
    <div class="label">Location</div>
    <div class="info">Midwest > Indiana, Kentucky; Southwest > Texas, Nevada, Utah; Pacific > California, Hawaii</div>        
</div>
<div class="drawer">Info 1<br/><br/></div> 
<div class="drawerBottom"></div>

$(".clause").click(function() {
    var tmp = $(this).next("div.drawer");
    if(tmp.is(":hidden"))
        tmp.slideDown('3s');
    else
        tmp.slideUp('3s');
});

$(".clause").hover(function() {

});
4

1 に答える 1

1

このようなものを使用してください。コードは非常に汚れています（私は初心者です：P）ので、そのまま使用しないでください..少しクリーンアップしてください。

http://jsfiddle.net/VWQQ2/

$(".operator").click(function() {
    if ($(this).text() == "OR") $(this).html("AND");
    else if ($(this).text() == "AND") $(this).html("NOT");
    else if ($(this).text() == "NOT") $(this).html("OR");
});

var tmp;

$(".clause").hover(function() {

    tmp = $(this).next("div.drawer");
    if (tmp.is(':hidden')) {
        tmp.height("1px");
        tmp.stop(true, true);
        tmp.slideDown('3s');
    }
},

function() {

    tmp = $(this).next("div.drawer");
    if (tmp.height() <= '1') {
        tmp.slideUp('3s');

    }
});


$(".clause").click(function() {
    tmp = $(this).next("div.drawer");
    tmp.stop(true, true);
    if (tmp.height() <= '1') {
        tmp.height('100%');
        var height = tmp.height();
        tmp.height('1px');
        tmp.animate({
            'height': height
        }, 500);
        state = 'open';
    }
    else if (tmp.height() > '2') {
        tmp.slideUp(500);
    }
});
于 2012-10-20T20:29:35.237 に答える