Question

附上我的代码的链接。点击它后，我希望输入框位于我的标签旁边。但不知怎的，它继续保持低于它。如何在展开之前使锚点在我的“点击”旁边？并隐藏在扩展？

<div id="headdiv">
    <ul>
        <li id="headsearch">
            <label style="padding:5px 30px;display:block;">click</label>
            <div id="hidewrap">
                <form>
                    <input type="text" />
                </form>
            </div><a href="#">Word</a>

        </li>
    </ul>
</div>

#headdiv {
    float:left;
    width:500px;
    background:blue;
    display:block;
    padding:20px 30px;
}
#headdiv ul {
    padding:0;
    margin:0;
}
#headdiv ul li {
    list-style-type:none;
}
#headsearch {
    width:112px;
    background:white;
    height:30px;
}
#hidewrap {
    display:inline;
    display:none;
}
#hidewrap form {
    display:inline;
}
#hidewrap input {
    width:400px;
}

$(function () {
    $("#headsearch").click(function () {
        $(this).animate({
            width: '500px'
        }, 200).css("background-color", "white");
        $("#searchA").animate({
            width: '170px'
        }, 200).css({
            'color': '#4d4d4d'
        });
        $('#hidewrap').show(200);
    });

    $("#headsearch").mouseleave(function () {
        $(this).animate({
            width: '112px'
        }, 200).css("background-color", "white");
        $("#searchA").animate({
            width: '68px'
        }, 200).css({
            'color': '#fff'
        });
        $('#hidewrap').hide(200);
    });
});

Answer 1

http://jsfiddle.net/7eu5Q/1/

让它为你工作。我只需要进行一些css更改。

#headsearch {
    width:112px;
    background:white;
    height:30px;
    position: relative;
}

#hidewrap form {
    display: inline-block;
    float: right;
}
#hidewrap input {
    width:350px;
    top: 4px; 
    left: 100px;
    display: inline-block;
    position: absolute;
}

Jquery on expand，输入框不会留在标签旁边

1 个答案: