-1

jqueryを使用して、自分のWebサイトのメニューにクイック検索機能を作成しようとしています。コードは非常に単純です。ユーザーがすべてのページのメニューの一部となる「クイック検索」リンクをクリックすると、入力テキストフィールドが表示され、必要なものをすばやく検索できます。私のコードは1つのトグルで機能しますが、それ以上は機能しません。私はこれまでずっとこれを修正しようとしてきました、そしてそれは単純であると思われるので私はイライラしています。私はここにいる誰かが私がこれを理解するのを手伝ってくれることを望んでいましたか？

注：私のコードは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とを使用して配置できます。以下を参照してください。.leftquicksearch

$(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() を呼び出すことは、単に .hide() に変更display: blockすることとは異なりdisplay: noneます。ところで、このクールなテストをチェックしてください: http://jsperf.com/jquery-css-display-none-vs-hide/2

可能性のあるケースが 2 つ (真、偽) しかない場合は、 のif...else代わりにを使用することをお勧めします。if...else ifまた、該当する場合は===overを使用し==ます。

JavaScript の比較では、どの等号演算子 (== と ===) を使用する必要がありますか?

于 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 に答える