Question

我正在尝试使用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>

Answer 1

你的风格搞砸了......修复它应该有效。请参阅 DEMO： 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();
    });
});

DEMO： http://jsfiddle.net/ZAHsv/7/

Answer 2

http://jsfiddle.net/5SQNP/

调用.hide（）和.show（）与将display: block更改为display: none不同。看看这个很酷的测试BTW：http://jsperf.com/jquery-css-display-none-vs-hide/2

当只有两种可能的情况（true，false）时，最好使用if...else而不是if...else if。另外，如果适用，请===使用==。

Which equals operator (== vs ===) should be used in JavaScript comparisons?

Answer 3

* 已编辑*

这是你想要的吗？

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中设置样式

简单切换仅适用一次

3 个答案: