0

我有一些带有抽屉菜单的按钮，我想做的是添加一个状态，以便当用户将鼠标悬停在按钮上时，抽屉会稍微凸出（可能会有一点摆动/橡皮筋），以便他们知道有一个抽屉，里面有更多信息。

我设置了滑动工作和悬停功能，但我不知道如何实现部分滑动。

有任何想法吗？

小提琴。

代码：

<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 回答