web-dev-qa-db-ja.com

24テーマのようにメニューで検索フォームを作成する

検索フォームをTwenty Fourteenのメニューに複製したいのですが。私はjQueryで検索ボタンを隠したり表示したりしようとしました。私の問題は、ボタンが左から右へ、そして右から左へスライドしていないことです。誰かが見てみることができればそれは素晴らしいだろう！これは私のHTMLコードです

                  <div class="search">
                    <form class="form-inline" id="forminline"role="form">
                        <div class="input-group">
                             <span class="input-group-btn" id="btn-search">
                                <div class="btn btn-search"><i class="fa fa-search search-ico"></i></div>
                            </span>
                            <label class="sr-only" for="exampleInputEmail2"><?php _ex( 'Search for:', 'label', 'categories', 'lagnogruppen' ); ?></label>
                            <input style="display: none;" type="search" class="form-control form-search" id="box-search" placeholder="<?php echo esc_attr_x( 'Sök på hemsidan &hellip;', 'placeholder', 'lagnogruppen' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">  
                        </div><!-- /input-group -->
                </form>
              </div>

これが私の単純なjQueryコードです。

jQuery(document).ready( function(){

jQuery('#btn-search').click( function(event){
    event.stopPropagation();
    jQuery('#box-search').toggle();
});

jQuery('#box-search').click(function(event){
    event.stopPropagation();
            });

jQuery(document).click( function(){
    jQuery('#box-search').hide();
});

;））;

menusthemesjquerysearchtheme-twenty-fourteen
1
HannesH

。animate（） は、これから見たいjQuery関数です。とても便利な。

これはあなたの特定の質問に対する実用的な例です：

http://jsfiddle.net/B8Yv9/

そして完全なHTMLの後処理：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<style>
.search { width:300px; }

.input-group { position:relative; float:right; }

#btn-search { cursor:pointer; position:absolute; padding:3px 8px; }

input { width:0; padding-left:20px; border:1px solid transparent; }
</style>
</head>

<body>

<div class="search">
    <form class="form-inline" id="forminline"role="form">
        <div class="input-group">
            <span class="input-group-btn" id="btn-search">
                <div class="btn btn-search"><i class="fa fa-search search-ico">S</i></div>
            </span>
            <label class="sr-only" for="exampleInputEmail2"><?php _ex( 'Search for:', 'label', 'categories', 'lagnogruppen' ); ?></label>
            <input type="search" class="form-control form-search unhovered" id="box-search" placeholder="Search" name="s" />
        </div>
    </form>
</div>

<script>
$('#btn-search').click(function(){
    $('input').css('border-color', '#aaa').animate({
        'width' : 200
    }, 300).focus().queue(function(){
            $(this).addClass('toggled'); 
            $(this).dequeue();
        });
});

$('input').hover(
  function() {
    $(this).removeClass('unhovered');
  }, function() {
    $(this).addClass('unhovered');
  }
);

$(document).click(function(){
    if($('input').hasClass('toggled') && $('input').hasClass('unhovered')) {
        $('input').animate({
                'width' : 0
        }, 300).css('border-color', 'transparent').queue(function(){
            $(this).removeClass('toggled'); 
            $(this).dequeue();
        });;  
    }
});
</script>
</body>
</html>
2
deflime