-1

我正在尝试使用 jquery 在我的网站菜单上创建一个快速搜索功能。代码非常简单，当用户单击将成为每个页面菜单一部分的“快速搜索”链接时，将出现一个输入文本字段，他们可以快速搜索他们想要的任何内容。我的代码适用于一个切换，但不是更多。我一直在尝试解决这个问题，它应该很简单，所以我很沮丧。我希望这里有人可以帮助我解决这个问题？

注意：我的代码在 jsfiddle 上不止一次工作，但在其他任何地方都没有。-_-

标记

<a href="#"> Register</a>  |
    <a href="#">My Account</a>  |
    <span>
        <span id="quicksearch" style="cursor:pointer; color:blue;"><a href="#">Quick Search</a></span>
        <input id="quickbox" type="text" style="float:right; display:none; padding:2px 5px 3px 5px; border:2px solid #ddd; margin-left:-110px; position:absolute; margin-top:20px;"/>
    </span>

jQuery

<script type="text/javascript">
$(document).ready(function(){
    $("#quicksearch").click(function(){          
        $("#quickbox").toggle();
    });
});
</script>
4

3 回答 3

2

你的风格搞砸了。修复它，它应该可以工作。见演示：http: //jsfiddle.net/ZAHsv/5/

您可以使用.top和.left从quicksearch链接定位.. 见下文，

$(document).ready(function(){   
    $("#quicksearch").click(function(){
        var qsPos = $(this).position();
        $('#quickbox').css({
             'position': 'absolute', 
             'top': qsPos.top + 20, 
             'left': qsPos.left
         }).toggle();
    });
});

演示：http: //jsfiddle.net/ZAHsv/7/

于 2012-06-12T00:35:09.490 回答
0

http://jsfiddle.net/5SQNP/

调用 .hide() 和 .show() 与仅更改display: block为.hide() 不同display: none。顺便看看这个很酷的测试：http: //jsperf.com/jquery-css-display-none-vs-hide/2

当只有 2 种可能的情况（真、假）时，最好使用 anif...else而不是 an 。if...else if此外，===在==适用时使用。

在 JavaScript 比较中应该使用哪个等号运算符（== vs ===）？

于 2012-06-12T00:54:35.743 回答
-1

*已编辑*

这是你想要的吗 ？

http://jsfiddle.net/ZAHsv/8/

toggle()工作正常，但你可以试试这个：

$(document).ready(function(){
    var show = true;
    $("#quicksearch").click(function(){
        if ( show == true) {
            $('#quickbox').show();
            show = false;
        }else if ( show == false )
            $('#quickbox').hide();
            show = true;
    });
});

要固定位置，请在 CSS 中设置样式

于 2012-06-12T00:30:28.657 回答